vant+compressorJs压缩图片并上传

1、安装Compressor.js

https://cdn.bootcdn.net/ajax/libs/compressorjs/1.2.1/compressor.js

2、HTML

<van-uploader v-model="fileList" multiple :max-count="1" :before-read="beforeRead" preview-size="130px" />

 

3、方法

// 返回布尔值
    beforeRead(file) {
      if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/jpg') {
        Toast('请上传图片格式');
        return false;
      }
      if(file.size<1024*1024*2){
        console.log('图片大小1',file.size)
        Toast('请上传2M以上图片');
        return false;
      }
      if(file.size>1024*1024*25){
        this.fileSize = file.size
        console.log('图片大小2',file.size)
        // Toast('请上传20M以下图片');
        let that = this
        console.log('aaaaaaaaaaaaaaaaaaaaaaa',file)
        return new Promise((resolve) => {
          // compressorjs 默认开启 checkOrientation 选项
          // 会将图片修正为正确方向
          new Compressor(file, {
            quality: 1,
            success(result){
              let file1 = new File([result], file.name, { type: file.type })
              console.log("File对象", file1);
              that.uploadFile(file1)
              resolve(result);
            },
            error(err) {
              console.log(err.message);
            },
          });
        });
      }
      this.fileSize = file.size
      console.log('图片大小3',file.size)
      this.uploadFile(file)
      return true;
    },

3、上传图片

uploadFile(file) {
      var formData = new FormData();
      formData.append("pic", file);
      // formData.system=H5
      this.$refs.loading.postForm("pwp/uploadpic", formData).then((res) => {
        // this.$refs.loading.loadingFlag--;
        if (res.status === "100000") {
          // fileUrl = res.data;
          this.fileUrl = res.data
          console.log('this.fileUrl',res);
        } else {
          Toast.fail("提交失败，请稍后重试");
        }
      });
    },