vue 圖片上傳到阿里雲oss

一隻大提莫發表於2018-07-09
Vue阿里

背景：本來打算用七牛的，但後不想管理太多賬號，所以選擇了阿里的。因為伺服器全是阿里的，很多功能用的也是阿里的。

直接開始吧！

一. 申請阿里賬號，開通oss,建立Bucket（不會的童鞋自行摸索一下）

二. 配置檔案

為了方便管理，全部配置在config.js裡了

//config.js
//阿里雲oss上傳配置(*號根據自己的資訊替換)
var client = new OSS.Wrapper({
    region: 'oss-cn-*****',//oss地址 
    accessKeyId: '*********',//accessKeyId
    accessKeySecret: '********',//secret
    secure: true,
    bucket: '****'//oss名字
});

export default {
    client 
} 
複製程式碼

accessKeyId和accessKeySecret

vue 圖片上傳到阿里雲oss
region和bucket

vue 圖片上傳到阿里雲oss
配置好以後，哪裡需要直接引入config

三.上傳

這裡vue用的是pug模板

<template  lang='pug'>
    div
        input#upload_file1(type='file' style='display:none' ref='logo'  @change="update($event,'logo')")
            span.upwarp( @click="fileClick('logo')" v-if='hotelData.logo==""')
                i.up-icon()
            span.show-pic(v-if='hotelData.logo!=""')
                img(:src='hotelData.logo' style='width: 100%;height: 100%;')
                i.del-icon(@click="delPic('logo')")
</template>
<script>
    import config from '../../../config'//引入阿里雲oss配置，路徑改成你自己的
    data(){
        return {
            hotelData:{
                logo:'',
            }
        }
    }

    methods:{

        //觸發上傳圖片input
        fileClick(name) {
            this.$refs[name].click()
        },
        //上傳圖片
        update:function(e,name) {
            var _file=e.target.files[0],imgUrl,self=this
            var timestamp = (new Date()).valueOf();
            //這裡在檔名後加一個隨機數防止下次上傳名字相同的圖片時伺服器上的圖片被替換了
            config.client.multipartUpload(_file.name+timestamp, _file).then(function (result) {
                //圖片太大的話上傳以後會分段（參考網友的，找不到原文了）
                if(_file.size>=100*1024){
                    imgUrl=result.res.requestUrls[0].split("?")[0]
                }else{
                    imgUrl=result.url
                }
                self.hotelData[name]=imgUrl
            }).catch(function (err) {
                console.log(err);
            });
        },
        //移除上傳圖片
        delPic(name){
            this.hotelData[name]=''
        },
    }
</script>
複製程式碼
文章部分內容參考了網友的，但是現在找不到原文了，就暫時不放原文連結了，找到再補上。複製程式碼

相關文章