Vue+Element-UI 上传图片并压缩

Vue+Element-UI 上传图片并压缩

1.版本

Vue:2.5.2

Element-UI：2.12.0

可实现图片上传前，自动压缩。

Element-UI组件，详情见 官网。

2.template部分

<el-form-item label="照片">
   <el-upload
   accept="image/*"
   class="avatar-uploader"
   :action="uploadPath"
   :show-file-list="false"
   :on-success="handleAvatarSuccess"
   :before-upload="beforeAvatarUpload">
    <img v-if="imgUrl" :src="imgUrl" class="avatar">
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>
</el-form-item>

3.script部分

data() {
   return {
     //压缩质量
     imgQuality: 0.5,
     imageUrl: ''
}
methods: {
  handleAvatarSuccess(res, file) {
    // 服务器返回结果处理
  },
  dataURItoBlob(dataURI, type) {
    var binary = atob(dataURI.split(',')[1]);
    var array = [];
    for(var i = 0; i < binary.length; i++) {
      array.push(binary.charCodeAt(i));
    }
    return new Blob([new Uint8Array(array)], {type: type});
  },
  beforeAvatarUpload(file) {
    const _this = this
    return new Promise(resolve => {
      const reader = new FileReader()
      const image = new Image()
      image.onload = (imageEvent) => {
        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        const width = image.width * _this.imgQuality
        const height = image.height * _this.imgQuality
        canvas.width = width;
        canvas.height = height;
        context.clearRect(0, 0, width, height);
        context.drawImage(image, 0, 0, width, height);
        const dataUrl = canvas.toDataURL(file.type);
        const blobData = _this.dataURItoBlob(dataUrl, file.type);
        resolve(blobData)
      }
      reader.onload = (e => { image.src = e.target.result; });
      reader.readAsDataURL(file);
    })
  }
}