vue实现压缩上传文件
压缩上传文件的实现方法
在Vue中实现文件压缩并上传可以通过以下步骤完成：
安装依赖
需要安装compressorjs库处理文件压缩：
npm install compressorjs组件代码示例
<template>
<div>
<input type="file" @change="handleFileChange" />
<button @click="uploadFile">上传</button>
</div>
</template>
<script>
import Compressor from 'compressorjs';
export default {
data() {
return {
compressedFile: null
}
},
methods: {
handleFileChange(event) {
const file = event.target.files[0];
if (!file) return;
new Compressor(file, {
quality: 0.6,
success(result) {
this.compressedFile = result;
}.bind(this),
error(err) {
console.error(err.message);
}
});
},
async uploadFile() {
if (!this.compressedFile) return;
const formData = new FormData();
formData.append('file', this.compressedFile);
try {
const response = await axios.post('/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
});
console.log('上传成功', response.data);
} catch (error) {
console.error('上传失败', error);
}
}
}
}
</script>关键配置参数说明
压缩选项
quality: 压缩质量(0-1)maxWidth/maxHeight: 最大宽高(像素)convertSize: 超过指定大小(字节)才压缩mimeType: 输出文件类型
上传处理 使用FormData对象包装压缩后的文件，通过axios发送POST请求。注意设置正确的Content-Type头部。
进阶优化方案
进度显示
axios.post('/upload', formData, {
onUploadProgress: progressEvent => {
const percent = Math.round(
(progressEvent.loaded * 100) / progressEvent.total
);
console.log(`上传进度: ${percent}%`);
}
})多文件处理
new Compressor(file, {
quality: 0.6,
multiple: true,
success(results) {
// results是数组
}
})错误处理增强
error(err) {
this.$notify.error({
title: '压缩失败',
message: err.message || '未知错误'
});
}注意事项
- 大文件压缩可能导致内存问题，建议限制文件大小
- 移动端需要考虑性能影响
- 服务端需要配置接收multipart/form-data
- 测试不同质量参数对文件大小和清晰度的影响
实现时应根据实际需求调整压缩参数，平衡文件大小和质量的取舍。
