近期相中上傳圖片利用后端傳遞到阿里云服務(wù)器會(huì)慢一點(diǎn)，讓后想著前端直接上傳阿里云來(lái)提高帶寬。記錄一下

首先下載

npm install ali-oss //下載插件ali-oss

我利用的element-ui

<el-upload
      class="avatar-uploader"
      action="##"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :http-request="uploadImageOss"
      :before-upload="beforeAvatarUpload">
      <img v-if="imageUrl" :src="imageUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
 </el-upload>
<script>
import OSS from 'ali-oss'
import axios from 'axios'
import moment from 'moment'
uploadImageOss(file){
  this.getFile(file)
}
async getFile({file}){
    //首先調(diào)用后端接口獲取oss配置
    let stsData = await axios.post('接口地址').then(res=>res.data.data) 
    var parseMast = {
        bucket:stsData.Credentials.bucket , // 這個(gè)可以找開(kāi)通OSS的管理員拿，或者接口返回獲取
        region: stsData.Credentials.endpoint, // 同上
        accessKeyId: stsData.Credentials.AccessKeyId, // 從接口返回的數(shù)據(jù)獲取
        accessKeySecret: stsData.Credentials.AccessKeySecret, // 同上
        stsToken: stsData.Credentials.SecurityToken,//從接口返回的數(shù)據(jù)獲取
        secure: true
    }
  let client = new OSS(parseMast); // 調(diào)用OSS依賴
  let name = file.name
  let date = new Date
  let dateFormat = moment(date).format('YYYYMMDD')
  client.multipartUpload('CJ/'+dateFormat+'/'+name, file, )
.then(res=>{
      console.log(res.res.requestUrls[0]);//上傳成功
    //so 這里有個(gè)小問(wèn)題  如果上傳的是利用微信截圖的png圖片  返回的鏈接會(huì)自動(dòng)帶一個(gè)
      ?uploadId=‘’  返回的鏈接不能打開(kāi)只能吧 ？ 之后的全部刪除
      我的處理方式是 利用后端接口返回的bucket + endpoint  進(jìn)行了圖片的拼接
      'http://' +stsData.Credentials.bucket + '.' +  stsData.Credentials.endpoint + '.aliyuncs.com/' + 'CJ/'+dateFormat+'/'+name
  })
.catch(err=>{
      console.log(err);//上傳失敗之后
  })
}
</script>

有沒(méi)有哪位大佬跟我說(shuō)一下為什么會(huì)返回一個(gè)uploadId 怎么解決 謝謝！！