图片上传到七牛云 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();
}