Vue中图片裁剪/压缩后上传

使用插件vue-cropper(https://www.npmjs.com/package/vue-cropper/v/0.4.7);
主要代码逻辑
图片选择后判断类型,选择需要裁剪的区域.
点击裁剪并上传后执行uploadImg方法, this.$refs.cropperImg.getCropData((data) => {}) //data为裁剪后的图片的base64 判断裁剪后的图片大小 >200k 进行压缩,压缩后发送正式上传图片请求 <200k直接发送上传请求

    cropImage(file) {
      let _this = this;
      this.fileUpload = file; //保存选择的文件信息
      if (!/\.(jpg|jpeg|png|JPG|PNG)$/.test(file.name)) {
        this.$Message.error('图片类型必须是jpeg,jpg,png中的一种')
        return false
      }
      this.isShow = true;
      let reader = new FileReader();
      reader.onload = (e) => {
        let data;
        if (typeof e.target.result === 'object') {
          // 把Array Buffer转化为blob 如果是base64不需要 
          data = window.URL.createObjectURL(new Blob([e.target.result]))
        }
        else {
          data = e.target.result
        }
        _this.cropper.img = data
      }
      // 转化为base64 
      reader.readAsDataURL(file)
      return false;
    },

页面使用

  <CropImage @uploadSuccess="handleSuccess" :cropperIndex="index" :cropperSize="[300,120]" :fixedRadio="[15,6]" :uploadTip="uploadTip" :uploadFormat="['jpg','jpeg','png']" ref="cropImage"></CropImage>

CropImage.vue剪裁/压缩组件封(完整代码)