vue3-element-plus 上传图片如何进行压缩？

思路：上传图片得到file 先进行压缩  0.1-1 压缩比例  压缩后在进行upload上传文件
第一步引入upload组件
第二步填充代码进行压缩

	// 压缩图片
		compressImage(file).then(compressedBlob => {
			const formData = new FormData();
			formData.append('file', compressedBlob, file.name);
			if (file.size / 1024 / 1024 > 2) {
				console.log(file.size / 100 / 1024);
				ElMessage.error('图片不能大于2MB!')
				return false
			} else {
   //请求上传图片接口
				scenicUpload(formData).then(res => {
					console.log(res);
					fileImg.value = res.data.url
					fileList.value = [{
						name: 'plant-1.png',
						url: testName + res.data.url,
					}]
					ruleForm.img = res.data.url
				})
			}
		});

第三步填充代码  上面的函数是进行一个形参实参的传递
下面是压缩图片的重点

const compressImage = (file) => {
	const reader = new FileReader();
	reader.readAsDataURL(file);
	return new Promise((resolve) => {
		reader.onload = e => {
			const img = new Image();
			img.src = e.target.result;
			img.onload = () => {
				const canvas = document.createElement('canvas');
				const ctx = canvas.getContext('2d');
				const { width, height } = img;
				canvas.width = width;
				canvas.height = height;
				ctx.drawImage(img, 0, 0, width, height);
				// 可以在这里调整压缩质量和尺寸
				const quality = 0.7; // 压缩质量
				const newImageData = canvas.toDataURL('image/jpeg', quality);
				const resizedBlob = dataURLtoBlob(newImageData);
				console.log(ctx);
				resolve(resizedBlob);
			};
		};
	});
};
const dataURLtoBlob = (dataurl) => {
	const arr = dataurl.split(',');
	const mime = arr[0].match(/:(.*?);/)[1];
	const bstr = atob(arr[1]);
	let n = bstr.length;
	const u8arr = new Uint8Array(n);
	while (n--) {
		u8arr[n] = bstr.charCodeAt(n);
	}
	return new Blob([u8arr], { type: mime });
};