vue+element-ui 压缩图片

一、html代码

<template>
	<el-upload
		  action="https://jsonplaceholder.typicode.com/posts/"
		  list-type="picture-card"
		  :on-preview="handlePictureCardPreview"
		  :before-upload="beforeAvatarUpload"
		  :on-success="photoAvatarSuccess"
		  :on-remove="handleRemove">
		  <i class="el-icon-plus"></i>
		</el-upload>
		<el-dialog :visible.sync="dialogVisible">
		  <img width="100%" :src="dialogImageUrl" alt="">
		</el-dialog>
  </template>

二、js代码

<script>
  export default {
    data() {
      return {
        dialogImageUrl: '',
        dialogVisible: false
      };
    },
    methods: {
		handleRemove(file, fileList) {
		    console.log(file, fileList);
		  },
		handlePictureCardPreview(file) {
		    this.dialogImageUrl = file.url;
		    this.dialogVisible = true;
		  },
		photoAvatarSuccess(){
		  
		},
		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 * 0.5; //宽缩一半
		      const height = image.height * 0.5;//高缩一半
		      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);
		  });
		},
    }
  }
</script>