vue js原生上传图片前压缩方法

// 压缩图片
			compressImage(file,maxWidth=750) {
				return new Promise((resolve) => {
					const reader = new FileReader();
					reader.onload = function(event) {
						const img = new Image();
						img.src = event.target.result;
						img.onload = function() {
							// const maxWidth = 750;
							const maxHeight = img.height * (maxWidth / img.width);

							const canvas = document.createElement('canvas');
							const ctx = canvas.getContext('2d');
							canvas.width = maxWidth;
							canvas.height = maxHeight;
							ctx.drawImage(img, 0, 0, maxWidth, maxHeight);

							canvas.toBlob((blob) => {
								resolve(blob);
							}, file.type);
						};
					};
					reader.readAsDataURL(file);
				});
			},

调用 ：

// 压缩图片，设置宽度为750
const compressedBlob = await this.compressImage(file, 750)
console.log('压缩后的图片', compressedBlob)

在使用Element UI进行图片上传前压缩，可以这样实现

<template>
  <el-upload
    class="upload-demo"
    action="/upload"
    :before-upload="handleBeforeUpload"
  >
    <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>
</template>

async handleBeforeUpload(file) {
   const compressedBlob = await this.compressImage(file, 750)
   return compressedBlob;
}

这样在上传就是进行图片宽度最大值的设定，高度自动，保证图片不变形！~