当前位置：首页 > news >正文

H5项目实现图片压缩上传——2025-06-04

news 来源：原创 2025/6/19 1:13:44

1. 图片压缩处理

前提：安装compressorjs

使用 compressorjs 库进行图片压缩，主要配置如下：

handleCompress(file) {new Compressor(file.file, {quality: 0.6,maxWidth: 1920,maxHeight: 1920,convertSize: 1024 * 1024,success: compressedFile => {const newFile = new File([compressedFile], file.file.name, {type: compressedFile.type,lastModified: Date.now()});this.onRead(newFile);},error: err => {console.error(err);this.$toast('图片压缩失败');}});
}

压缩配置说明：

quality: 0.6 - 压缩质量为60%

maxWidth: 1920 - 最大宽度限制

maxHeight: 1920 - 最大高度限制

convertSize: 1MB - 转换阈值

2. 文件大小限制

代码会检查文件大小，超过限制会提示错误：

<van-uploader:after-read="handleCompress"accept="image/*"multiple:max-size="10 * 1024 * 1024"@oversize="onOversize"
>

onOversize() {this.$toast('文件大小不能超过10MB');
}

3. 文件上传处理

压缩后的文件通过 FormData 进行上传：

onRead(file) {var formData = new FormData();if (file instanceof Array) {// 判断是否是数组file.map(element => {formData.append('file', element.file);});} else {formData.append('files', file);}formData.append('subject_id', this.id);formData.append('file_note', '');formData.append('name', file.name);uploadSourceFile(formData).then(res => {if (res.code === 0) {this.$toast({message: res.msg,position: 'middle'});this.activeTab = 'bytime';this.activeTimeNames = 0;this.getStatistics();} else {this.$toast({message: res.msg,position: 'middle'});}})