Vue 3 图片上传前压缩有三种方案：1. compressorjs库实现质量自适应压缩；2. image-compressor.js按原始尺寸分段策略压缩；3. Canvas手动压缩（零依赖），均在before-upload或http-request钩子中调用，支持体积控制与格式转换。
Vue 3 中实现上传前图片压缩，核心是在用户选中文件后、真正发起 HTTP 请求前，用 JS 对图片做有损压缩（如调整 quality、缩放尺寸），再将压缩后的 File 或 Blob 交给上传逻辑。不依赖后端，纯前端完成，能有效减小体积、节省带宽、提升体验。
用 compressorjs 库做质量自适应压缩
这是目前最简洁可靠的方案，支持按目标大小反复尝试压缩，适合对最终体积有硬性要求的场景（比如必须 ≤1MB）。
- 安装：
npm install compressorjs - 封装压缩函数，自动降质直到达标或达到最大尝试次数：
（示例中目标为 1MB，初始 quality=0.6，每次降 0.1，最多试 10 次）
- 在
before-upload或http-request钩子中调用该函数，返回 Promise，确保压缩完成后再上传 - 注意：
compressorjs默认输出Blob，如需File可用new File([blob], file.name, {type: blob.type})转换
用 image-compressor.js 做分段策略压缩
适合对不同原始大小的图片采用差异化压缩强度，避免小图被过度压缩失真，也防止大图一次压不够。
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 安装：
npm install image-compressor.js - 根据原始 size 区间设定 quality（如 3–4MB → quality=0.25；7–9MB → quality=0.1）
- 关闭
convertSize和checkOrientation可加快处理速度，仅靠 quality 控制体积 - 适用于业务明确知道常见图片范围，且希望压缩结果更可预测的项目
用 Canvas 手动压缩（零依赖）
如果你不想引入第三方库，或需要完全自定义流程（比如统一转成 image/jpeg、固定宽高、添加水印），Canvas 是底层可控的选择。
- 步骤：读取 File → 转为
dataURL→ 创建Image→ 绘入canvas→canvas.toBlob(..., 'image/jpeg', quality) - 关键点：必须指定
image/jpeg类型才能让quality生效；PNG 等格式不支持 quality 参数 - 建议加 size 判断：只对 ≥100KB 的图片压缩，避免小图反而变大（因 JPEG 容器开销）
结合上传组件（如 Element Plus）的完整流程
以 http-request 中拦截并替换文件：
- 禁用默认上传：
:auto-upload="false"，手动控制 - 在
http-request回调中接收原生file，传入压缩函数 - 压缩成功后，用
FormData构造请求体，调用axios.post或fetch上传 - 记得校验
file.type.startsWith('image/')，跳过非图文件
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
