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

今天就跟大家聊聊有关Vue+Element-UI实现上传图片并压缩，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

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);
  })
 }
}

看完上述内容，你们对Vue+Element-UI实现上传图片并压缩有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注亿速云行业资讯频道，感谢大家的支持。