用原生获取图片，监听change事件取e.target.files[0]，用URL.createObjectURL()预览，再通过Cropper.js裁剪，toBlob()转JPEG Blob并封装为File上传，后端需校验文件头而非仅依赖MIME类型。
怎么用 input type="file" 拿到图片文件
头像上传第一步不是裁剪，是让用户选中图片。直接用原生 <input type="file" accept="image/*"> 最可靠，accept="image/*" 能过滤非图片类型（但不防伪造，后端仍需校验）。别用 click 触发隐藏 input 的“伪装上传按钮”方案——它在 iOS Safari 和部分安卓 WebView 里可能失效或触发两次选择框。
关键点：
- 监听
change事件，从e.target.files[0]取File对象，不是value -
File对象可直接传给URL.createObjectURL()生成临时 blob URL，用于预览，无需先上传到服务器 - 别用
FormData.append('avatar', file)就完事——裁剪前不能直接发，得等用户操作完
用 Cropper.js 做前端裁剪靠谱吗
靠谱，但得选对版本和初始化方式。Cropper.js 是目前最轻量、兼容性好、API 清晰的纯前端裁剪库（v4+ 支持 ES Module，v3 用 UMD）。它不处理上传，只管把 <img alt="HTML怎么做头像上传裁剪_html头像上传裁剪功能实现【通俗易懂】" > 标签里的图片按规则裁出 canvas 数据。
常见坑：
立即学习“前端免费学习笔记（深入）”；
- 必须等图片
load完再初始化 cropper，否则宽高为 0，裁剪框错位——推荐用img.onload = () => new Cropper(img, {...}) -
aspectRatio: 1控制正方形裁剪，但若原始图不是 1:1，用户拖拽时会自动缩放填充，这是预期行为 -
crop事件里调cropper.getCroppedCanvas()才能拿到裁剪后 canvas，getCroppedCanvas({ width: 200, height: 200 })强制输出尺寸，避免后端再缩放
裁剪后怎么转成 File 或 Blob 上传
canvas 本身不是文件，得手动转。最常用的是 canvas.toBlob()，它异步执行，回调里才能拿到 Blob；如果需要同步得到 base64（比如兼容老系统），用 canvas.toDataURL('image/jpeg', 0.8)，但体积大、无法控制质量参数。
实操建议：
- 用
canvas.toBlob(callback, 'image/jpeg', 0.9)生成高质量 JPEG Blob，比 PNG 小 60%+，头像够用 - 把 Blob 包进
new File([blob], 'avatar.jpg', { type: 'image/jpeg' })，这样FormData识别更稳，name字段也符合后端习惯 - 别忘了释放
URL.createObjectURL()创建的 blob URL，用URL.revokeObjectURL(url)，否则内存泄漏
后端接收时为什么报 invalid image format
前端看着裁剪成功，后端却解析失败，大概率是 MIME 类型不一致。比如前端用 toBlob 指定了 'image/jpeg'，但 canvas 源图是 PNG，某些浏览器（特别是旧版 Chrome）会忽略 type 参数，仍输出 PNG 格式，而 Blob 的 type 却还是 image/jpeg —— 后端按 JPEG 解析就崩了。
稳妥做法：
- 后端不依赖
Content-Type头判断格式，而是读文件头（magic bytes）识别真实类型 - 前端上传前，用
file.type或blob.type打印下实际值，调试时加个console.log('real type:', blob.type) - 如果必须统一格式，裁剪后强制转 JPEG：哪怕源图是 PNG，也用
toBlob(cb, 'image/jpeg')，并确保 canvas 绘制时不带透明通道（ctx.fillStyle = '#fff'; ctx.fillRect(0,0,w,h);先填白底）
裁剪功能真正的复杂点不在代码行数，而在图片格式、浏览器实现差异、Blob 生命周期这些看不见的链路。一个没关的 createObjectURL，一次没校验的 MIME 类型，都可能让头像在某个机型上永远灰着。
