el-upload图片上传前端压缩（auto-upload版本）

标签中添加before-upload的hock

	<el-upload
	  class="avatar-uploader"
	  :action="baseUrl + '/v1/addimg/shop'"
	  :show-file-list="false"
	  :on-success="handleShopAvatarScucess"
	  :before-upload="beforeAvatarUpload">
	</el-upload>

hock方法

beforeAvatarUpload (file) { 
	return new Promise((resolve, reject) => {
		imageConversion.compressAccurately(file, 40).then(res => { 
			var compressed_file = new File([res], file.name, {type: file.type, lastModified: Date.now()});
			compressed_file.uid = file.uid;
			resolve(compressed_file)
		})
	})
}, 

上面的添加好就ok了，接下来看下源码

网上很多版本都是使用submit时才上传的，而直接使用auto-upload上传时的情况没有考虑到，而在源码中还是有些区别的

upload(rawFile, file) {
      this.$refs.input.value = null;

      if (!this.beforeUpload) {
        return this.post(rawFile);
      }

      const before = this.beforeUpload(rawFile);
      if (before && before.then) {
        before.then(processedFile => {
        
          //进行了判断，此处需要将blob对象转化为object
          if (Object.prototype.toString.call(processedFile) === '[object File]') {
          
            this.post(processedFile);  // 这里进入
          } else {
            this.post(rawFile);
          }
        }, () => {
          this.onRemove(null, rawFile);
        });
      } else if (before !== false) {
        this.post(rawFile);
      } else {
        this.onRemove(null, rawFile);
      }
    },

post(rawFile) {
      const { uid } = rawFile;
      const options = {
 
        onProgress: e => {
          this.onProgress(e, rawFile);    //继续进入
        },
        onSuccess: res => {
        },
        onError: err => {
        }
      };
    },

 handleProgress: function handleProgress(ev, rawFile) {
	      var file = this.getFile(rawFile);          //这里进去
	      this.onProgress(ev, file, this.uploadFiles);
	      file.status = 'uploading';
	      file.percentage = ev.percent || 0;
	    },

getFile: function getFile(rawFile) {
	      var fileList = this.uploadFiles;
	      var target = void 0;
	      fileList.every(function (item) {
	      
	      //这里进行了判断，file的uid是否相等，所以需要将原来file等uid复制过来
	        target = rawFile.uid === item.uid ? item : null;   
	        return !target;
	      });
	      return target;
	    },