iview upload before-upload组织上传失败

   这里需要说明一下iview upload组件有一个bug,before-upload函数中如果返回false不能阻止文件自动上传。on-success函数中依然能够拿到上传成功的文件信息,不过我们通常在上传之前进行一系列操作,比如格式判断。这里我设置了图片尺寸判断。
 <Upload
     ref="upload"
       :show-upload-list="false"
       :default-file-list="defaultList"
       :on-success="handleSuccess"
       :disabled="isdisable"
       :headers="headers"
       :format="['jpg', 'jpeg', 'png']"
       :max-size="2048"
       :on-format-error="handleFormatError"
       :on-exceeded-size="handleMaxSize"
       :before-upload="handleBeforeUpload"
       multiple
       type="drag"
       :action="uploadUrl + '/visualService/files/'"
       style="display: inline-block"
     >
       <span style="">选择文件</span>
       <p>JPGPNGGPEG格式、文件不超过2MB;最佳分辨率为960*620px</p>
     </Upload>

上面的代码就不用多说了,下面是上传之前进行的一些列操作

 //上传之前对上传文件尺寸
    async handleBeforeUpload(file) {
      const check = this.uploadList.length < 2;
      if (!check) {
        this.$Notice.warning({
          title: "最多可以上传一张照片.",
        });
         return check;
      }
       //readFile只要是对上传的文件进行读取判断操作
      let result = await this.readFile(file);
        if (!result) {
        //  this.$refs.upload.clearFiles();
          this.formValidate.file = "";
        }
        return result;
    },

主要的判断操作在这里

readFile(file) {
     return new Promise((reslove, reject) => {
        let reader = new FileReader();
        reader.onload = (e) => {
          let data = e.target.result;
          //加载图片获取图片真实宽度和高度
          let image = new Image();
          image.onload = () => {
            let widthOr = image.width;
            let heightOr = image.height;
            if (widthOr > 960 || heightOr > 620) {
              this.$Message.error({
                content: "文件尺寸不符合要求,请重新上传",
                background: true,
                duration: 5,
              });
              reject(false);
            } else {
              reslove(true);
            }
          };
          image.src = data;
        };
        reader.readAsDataURL(file);
      });
     
    }

iview 和element 里面upload插件 before-upload返回false都不好使,如果返回的是promise就可以。

你可能感兴趣的:(文件上传,vue)