Layui原生upload组件不支持裁剪，裁剪必须在用户选中文件后、上传前完成；upload.done因触发于上传成功后，已错过裁剪时机；关键配置auto:false不可省略，否则choose回调后立即自动上传；croppers.js封装版要求elem为容器而非按钮，url为接口地址，输出格式需手动指定。
layui 原生 upload 组件不支持裁剪，必须在用户选中文件后、发起上传前，用 cropper.js 或封装版 croppers.js 完成裁剪，再提交 base64 或 blob。
为什么不能在 upload.done 里调用裁剪逻辑
upload.done 是上传成功后触发的回调——此时图片早已传到后端，前端只拿到服务端返回的 URL，完全错过裁剪时机。裁剪唯一可行窗口是「用户选中本地文件 → 上传请求发出前」。
- 常见错误：点击上传 → 弹出裁剪框 → 确认 → 上传的仍是原图（说明裁剪没介入上传流程）
- 根本原因：没禁用自动上传，或没在
choose回调里拦截文件读取 - 关键配置必须设
auto: false，否则choose拿到文件后立刻触发start和upload
croppers.js 封装版对接要点
社区常用 croppers.js（非官方，基于 cropper.js 封装的 layui 模块），它简化了 FileReader 和 canvas 渲染流程，但参数语义和原生有差异：
-
elem必须是容器 DOM 元素（如<div id="cropper-box"></div>），不是按钮元素 -
url填的是最终上传接口地址（不是图片路径），上传由它内部调用upload.post()完成 -
saveW/saveH控制输出尺寸，但实际裁剪画布大小由aspectRatio或用户拖拽决定 - 默认输出 PNG，若需 JPEG，得手动改：
cropper.getCroppedCanvas().toDataURL('image/jpeg', 0.9)
手动串联 layui.upload + cropper.js 的可控写法
放弃封装、自己控制流程，适合需要精细干预的场景（如加压缩、改 MIME 类型、校验尺寸）：
- 用
upload.render({ auto: false, choose: function(obj) { ... } })拿到obj.files[0] - 用
FileReader读取为dataURL，注入到cropper实例的<img>中 - 确保
#crop-container已挂载且可渲染，否则new Cropper(...)报Cannot read property 'cropper' of undefined - 用户确认后，调用
cropper.getCroppedCanvas().toBlob(blob => { upload.post(url, { file: blob }); })
裁剪逻辑真正生效的前提，是 DOM 容器就位、auto: false 生效、且 FileReader 加载完成后再初始化 cropper——这三个条件缺一不可，漏掉任一环节都会导致裁剪框闪退或无响应。
