必须用 filereader 读取本地图片转 data url 才能喂给裁剪库；cropperjs 需禁用 autocrop 和 background、设 viewmode:1 与 aspectratio:1；导出用 getcroppedcanvas().todataurl('image/png')；上传用 formdata.append('avatar', blob, 'avatar.png')。
上传前必须用 FileReader 读取本地图片
直接把 <input type="file"> 的 files[0] 丢给裁剪库会失败——浏览器禁止 JS 直接读取文件路径或二进制内容。必须先用 FileReader 转成 data URL，才能喂给 canvas 或裁剪组件。
常见错误是跳过这步，试图用 URL.createObjectURL(file) 后直接传给裁剪器，某些库（比如 cropperjs）能工作，但部分裁剪逻辑（如像素级缩放、导出高精度图）会因 blob URL 缓存或跨域限制出问题。
- 始终用
reader.readAsDataURL(file)，并在reader.onload回调里初始化裁剪器 - 避免在
change事件外提前调用裁剪器的destroy()或重复初始化，否则 canvas 渲染错乱 - 如果用户连续选两次图，记得先
cropper.destroy()再重建，否则内存泄漏且界面卡顿
cropperjs 初始化要禁用 autoCrop 和 background
cropperjs 默认开启 autoCrop: true，会导致用户还没拖拽就生成一张裁剪图，掩盖原始图；同时默认 background: true 会在 canvas 外层画灰色背景，干扰头像圆角预览效果。
头像裁剪的核心需求是：可见原始图 → 手动拖拽缩放 → 圆形预览 → 导出 PNG（透明背景）。这些必须靠配置压制默认行为。
- 显式设
autoCrop: false，让用户主动点“确认裁剪”再执行 - 设
background: false，避免 canvas 上多一层灰底，影响透明 PNG 输出 - 加
viewMode: 1锁定裁剪框不越界，防止用户拉出无效区域 - 设
aspectRatio: 1强制正方形裁剪框，适配头像场景
导出时用 getCanvas().toDataURL('image/png') 而非 getData()
cropper.getData() 返回的是裁剪坐标和缩放信息（{x, y, width, height, rotate}），不是图片数据。真要上传，必须调 cropper.getCroppedCanvas() 拿 canvas 元素，再转 data URL 或 Blob。
容易踩坑的是：用 toDataURL('image/jpeg') 导出头像——JPEG 不支持透明，圆形头像边缘会留白或变黑；而 PNG 支持 alpha 通道，且 getCroppedCanvas() 默认输出带透明背景的 canvas。
- 导出前检查
cropper.getCroppedCanvas()是否返回有效 canvas，null 表示尚未裁剪或尺寸为 0 - 用
canvas.toDataURL('image/png', 1.0)，第二个参数是质量，PNG 忽略该值，但写上更明确 - 如需压缩上传，再用
canvas.toBlob(callback, 'image/jpeg', 0.8)转 JPEG 并控制体积
表单提交时别传原始 file，传裁剪后的 Blob
HTML 表单的 <input type="file"> 无法被 JS 动态赋值（安全限制），所以不能把裁剪后的图片塞回原 input。正确做法是：生成 Blob 后，用 new FormData() 手动 append，再 fetch 提交。
常见错误是拼错字段名（后端收不到）、漏掉 filename 参数导致后端无法解析，或没设 Content-Type（其实 FormData 自动处理，不用手动设）。
- 用
canvas.toBlob(blob => { formData.append('avatar', blob, 'avatar.png'); }) - 字段名
'avatar'必须和后端约定一致，不能写成'file'或'image'随意发挥 - fetch 时用
method: 'POST'，不要加headers: {'Content-Type': 'multipart/form-data'}—— 这会让浏览器发错格式
<input type="file" accept="image/*">，一个 <div id="cropper-container"></div>，一个隐藏的 <canvas id="cropper-canvas"></canvas>。所有交互逻辑绑定在 file input 的 change 事件里，其余全由 cropperjs 管理。最易忽略的是：用户取消裁剪后没清空 canvas，下次上传时旧图残留——得在每次初始化前清空容器 innerHTML 或重置 canvas width/height。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
