图片上传前客户端自动压缩的核心是通过before-upload钩子拦截file对象，用compressorjs或canvas在浏览器内降质缩放并返回压缩后的file，避免后端依赖，减小体积、节省带宽。
Vue 文件上传交互中，图片上传前的客户端自动压缩，核心是拦截原始文件、在浏览器内完成降质缩放、再把处理后的 Blob/File 传给上传逻辑。不依赖后端，压缩发生在用户本地，能显著减小上传体积、节省带宽、提升响应速度。
用 before-upload 拦截并压缩
Element Plus 的 el-upload 或 Ant Design Vue 的 a-upload 都支持 before-upload 钩子函数。它接收原始 File 对象，返回 false 可阻止上传，返回 Promise<file></file> 则会用该文件继续上传流程——这正是插入压缩逻辑的最佳位置。
- 判断是否为图片：检查
file.type.startsWith('image/') - 按大小分流：比如 ≤1MB 直接放过；＞1MB 才触发压缩，避免小图画蛇添足
- 返回一个 Promise，在 resolve 中传入压缩后的 File 对象（不是 base64 字符串）
推荐使用 compressorjs 库（简洁可靠）
相比手写 Canvas，compressorjs 封装成熟、兼容性好、API 清晰，还自动处理 EXIF 朝向、支持 maxWidth/maxHeight 等维度控制。
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章