vue实现图片压缩上传
实现图片压缩上传的方法
使用HTML5的Canvas进行压缩
通过Canvas的drawImage和toDataURL方法实现图片压缩。创建一个input元素用于选择图片，监听change事件处理压缩逻辑。
<input type="file" accept="image/*" @change="handleImageUpload" />methods: {
handleImageUpload(event) {
const file = event.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = (e) => {
const img = new Image();
img.onload = () => {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// 设置压缩后的宽度（保持比例）
const MAX_WIDTH = 800;
const scale = MAX_WIDTH / img.width;
canvas.width = MAX_WIDTH;
canvas.height = img.height * scale;
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
canvas.toBlob((blob) => {
this.uploadCompressedImage(blob);
}, 'image/jpeg', 0.7); // 质量参数0.7（0-1）
};
img.src = e.target.result;
};
reader.readAsDataURL(file);
}
}使用第三方库（如compressorjs）
安装compressorjs库可以简化压缩流程：
npm install compressorjs在Vue组件中引入并使用：
import Compressor from 'compressorjs';
methods: {
compressImage(file) {
new Compressor(file, {
quality: 0.6,
maxWidth: 1024,
success: (compressedFile) => {
this.uploadCompressedImage(compressedFile);
},
error: (err) => {
console.error('压缩失败:', err);
}
});
}
}上传压缩后的图片
通过FormData将压缩后的图片发送到服务器：
uploadCompressedImage(blob) {
const formData = new FormData();
formData.append('file', blob, 'compressed.jpg');
axios.post('/api/upload', formData, {
headers: { 'Content-Type': 'multipart/form-data' }
}).then(response => {
console.log('上传成功', response.data);
}).catch(error => {
console.error('上传失败', error);
});
}显示上传进度
添加进度条反馈用户体验：
axios.post('/api/upload', formData, {
headers: { 'Content-Type': 'multipart/form-data' },
onUploadProgress: (progressEvent) => {
const percent = Math.round(
(progressEvent.loaded * 100) / progressEvent.total
);
console.log(`上传进度: ${percent}%`);
}
})注意事项
- 压缩比例（
quality）需根据实际需求调整，过高可能失去压缩意义，过低可能影响图片质量。 - 大图建议限制分辨率（如
maxWidth），避免移动端内存问题。 - 服务器需配置接收二进制文件（如Express需使用
multer中间件）。
