element ui 實現上傳文件到阿里雲oss

背景介紹

所寫的項目是用vue+element搭建的，想要實現一個圖片上傳的功能，存在阿里雲服務器。後臺看了阿里雲文檔，以爲客戶端直傳是最合適的方案。流程大體爲客戶端選取文件後向後端索要簽名，而後傳到阿里雲。

效果圖

代碼實現

<el-upload
    :action="addressOss"
    list-type="picture-card"
    ref="upload"
    :before-upload="upload"
    :data="dataOss"
    :on-success="uploadSuccess"
    :on-error="uploadError"
    >
    <i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
    <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
複製代碼

就是正常的element組件,主要用到了上傳時的幾個鉤子函數，上傳前before-upload，上傳成功on-success，上傳失敗on-success，和上傳的地址action，上傳額外的參數data。接下來看一下對應得函數。

選擇圖片後，上傳前執行的函數

async upload(file) {
    let fileName = "devicesource"+file.uid+file.name;//文件名，和後臺約定
    let reponse = await this.$store.dispatch({
        type:'device/Sign',
        data:{
            fileName:fileName
        }
    })//索要簽名
    this.addressOss = reponse.data.result.host;//上傳地址
    this.dataOss = {
        key:reponse.data.result.key,
        ossAccessKeyId:reponse.data.result.ossAccessKeyId,
        policy:reponse.data.result.policy,
        signature:reponse.data.result.signature,
        callback:reponse.data.result.callback,
    };//上傳額外參數
}
複製代碼

上傳失敗和成功後的處理函數

uploadError(err, file, fileList){
    this.$message.error('圖片上傳失敗！');
}
uploadSuccess(err, file, fileList){
    this.$message.success('圖片上傳成功！');
    this.photos.push(this.addressOss+""+this.dataOss.key)
}
複製代碼

上傳圖片結束。

總結

由於後臺接口的約束，我這邊是一個圖片一個圖片上傳，可是大致思路就是這樣了，但願能幫到你們！