圖片上傳到七牛雲 elementui

template

//action 是指的七牛雲的上傳地址 （分好多區）
<el-form-item label="上傳圖片" label-width="100px" class='add_company'>
     <el-upload class="upload-demo" action="https://upload-z1.qiniup.com" :on-remove='handleRemove' :on-success="handleSuccess" :file-list="fileList" list-type="picture" :limit='1' :data='uploadToken' :before-upload="beforeUpload">
           <el-button size="medium" type="primary">上傳圖片</el-button>
           <div slot="tip" class="el-upload__tip">只能上傳jpg/png/jpeg文件，且不超過2m</div>
     </el-upload>
 </el-form-item>

script

data() {
    return {
      uploadToken:{
         key:'',
         token:''
       }
}
methods(){
handleSuccess(file, fileList){
//http://pygoods.mysvip.xyz/  圖片外鏈地址
     this.addGoodsForm.imgUrl = 'http://XXXX/'+file.key
},
handleRemove(file, fileList) {
     console.log(file,fileList[0])
     this.addGoodsForm.imgUrl=''
},
 beforeUpload(file){
      const isPNG = file.type === "image/png";
      const isJPEG = file.type === "image/jpeg";
      const isJPG = file.type === "image/jpg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isPNG && !isJPEG && !isJPG) {
        this.$message.error("上傳頭像圖片只能是 jpg、png、jpeg 格式!");
        return false;
      }
      if (!isLt2M) {
        this.$message.error("上傳頭像圖片大小不能超過 2MB!");
        return false;
      }
//將上傳的文件名保存成key,把這個key拼接到外鏈地址
        this.uploadToken.key=`upload_pic_${file.name}?`+ Date.parse(new Date()) //模板語法`字符串${變量}`
        },
//獲取上傳文件時候的token
goodsToken(){
       let params ={
           bucketName :'pygoods'
        }
       this.$axios.post(this.GLOBAL.serverProduct+'/goods/getToken',params).then(res=>{
                this.uploadToken.token = res.data
                console.log(res.data)
            })
        },
}，
created(){
  this.goodsToken();
}