element上传图片至七牛云

超简单的上传图片至七牛云

<el-row>
          <el-form-item label="图片" prop="img" label-width="120px">
            <el-col :span="20">
              <el-upload :action="upload_qiniu_url" :before-upload="beforeUpload" :data="qiniuData" :on-error="uploadError" :on-success="uploadSuccess" :show-file-list="false" class="avatar-uploader">
                <img :src="imageUrl" alt class="avatar" v-if="!isEmpty(imageUrl)" />
                <i class="el-icon-plus avatar-uploader-icon" v-else></i>
              </el-upload>
            </el-col>
          </el-form-item>
        </el-row>

	  imageUrl: '',
      //七牛云上传
      qiniuData: {
        key: "",
        token: ""
      },
      // 七牛云上传储存区域的上传域名（华东、华北、华南、北美、东南亚）
      upload_qiniu_url: "",
      upload_qiniu_addr: "",
      Global: {
        dataUrl: ""
      },

//获取七牛云的token
    getQiniuToken: function () {
      getQiNiuData().then(res => {
        this.qiniuData.token = res.data.object
      });
    },
    
    uploadSuccess(res) {
      this.visibleDialog.loading = false;
      let img = this.upload_qiniu_addr + res.key;
      this.$set(this, 'imageUrl', img)
    },
    
    uploadError(res) {
      console.log(res);
      this.visibleDialog.loading = false;
      this.$message.error('上传文件错误，不存在!');
    },
    
    beforeUpload(file) {
      this.visibleDialog.loading = true;
      this.qiniuData.key = file.name;
      const isLt2M = file.size / 1024 / 1024 < 1;
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 1MB!');
        this.visibleDialog.loading = false;
      }
      return isLt2M;
    },
    
    //提交
    submitForm(formName) {
      this.$refs.formData.validate((valid) => {
        if (valid) {
          this.form.img = this.imageUrl;
          this.visibleDialog.loading = true;
          saveAdvertising(this.$qs.stringify(this.form)).then((response) => {
            console.log(response);
            this.$message.success(response.data.statusDescription);
            this.visibleDialog.loading = false;
            this.visibleDialog.addGoodsDialog = false;
            this.getAdvertisingList();
          }).catch((error) => {
            console.log(error);
            this.visibleDialog.loading = false;
          })
        } else {
          return
        }
      });
    },