vue3 上传压缩图片

	<div>
		<input type="file" @change="handleFileChange" accept="image/*">
		<img v-if="compressedImage" :src="compressedImage" alt="压缩后的图片">
	</div>

	const compressedImage = ref(null)
	const handleFileChange =  (event) => {
		const file = event.target.files[0];
		
		if (file) {
			const reader = new FileReader();
			
			reader.onload =  () => {
				const img = new Image();
				img.src = reader.result;
				
				img.onload =  () => {
					const maxWidth = 800; // 设置最大宽度
					const maxHeight = 600; // 设置最大高度
					const imageWidth = img.width;
					const imageHeight = img.height;
					
					// 计算新的宽度和高度，以保持纵横比
					let newWidth, newHeight;
					if (imageWidth > imageHeight) {
						newWidth = maxWidth;
						newHeight = (imageHeight / imageWidth) * maxWidth;
					} else {
						newHeight = maxHeight;
						newWidth = (imageWidth / imageHeight) * maxHeight;
					}
					const canvas = document.createElement('canvas');
					const ctx = canvas.getContext('2d');
					canvas.width = newWidth;
					canvas.height = newHeight;
					ctx.drawImage(img, 0, 0, newWidth, newHeight);
					
					
					
					// 将压缩后的图片转换为Base64数据URL
					const imgurl = canvas.toDataURL('image/jpeg', 0.2); // 可以调整压缩质量
					compressedImage.value =imgurl
					console.log(imgurl,'==1')
					
					
				};
			}

			reader.readAsDataURL(file);
		}
	}