无法靠layui upload原生配置实现上传并实时裁剪圆形，因upload组件不处理裁剪，须手动拦截文件、用cropper.js渲染并强制输出圆形canvas后提交Blob。
不能靠 layui upload 原生配置实现“上传并实时裁剪圆形”——upload 组件本身不处理裁剪，必须手动拦截文件、用 cropper.js 渲染、强制输出圆形 canvas，再提交 Blob。
为什么 upload.render() 加 accept: 'images' 和 auto: false 还是传原图
因为 auto: false 只是禁用了自动上传，但没接管文件内容；如果你在 choose 回调里没读取 obj.files[0]、没转成 dataURL、没塞进 <img>、没初始化 Cropper 实例，那后续所有裁剪逻辑就根本没启动。常见表现是：点按钮 → 选图 → 直接上传了，裁剪框压根没出现。
-
choose回调必须显式调用obj.preview()或自己用FileReader读取，否则cropper拿不到图像源 -
elem必须指向一个已存在的容器（如<div id="crop-container"></div>），不能是按钮本身 - DOM 必须在
new Cropper()前已挂载，否则报Cannot read property 'cropper' of undefined
如何用 cropper.js 强制输出圆形裁剪结果
cropper.js 默认裁剪是矩形 canvas，要圆形头像，得靠 CSS 遮罩 + canvas 裁剪双保险：先设 aspectRatio: 1 锁定正方形画布，再用 getCroppedCanvas() 输出后，手动用 canvas 绘制圆形遮罩，或直接对最终 <img> 加 border-radius: 50%（仅视觉，不改变实际像素）。真正影响上传内容的是 canvas 输出阶段：
- 调用
cropper.getCroppedCanvas({ width: 200, height: 200 })得到正方形 canvas - 创建新 canvas，用
arc()绘制圆形路径，clip()裁切，再把 cropped canvas draw 进去 - 最后用
toBlob(callback, 'image/jpeg', 0.9)输出 JPEG 格式，避免 PNG 透明通道导致后端解析失败 - 别依赖
done回调做裁剪——它触发时请求早已发出，裁剪必须在choose→readAsDataURL→Cropper初始化 → 用户确认 →getCroppedCanvas→toBlob这条链里完成
upload.post 提交裁剪后 Blob 的关键写法
layui 的 upload.post() 不支持直接传 File 对象，必须包装成 FormData，并确保 key 名和服务端约定一致（常见为 file 或 avatar）：
cropper.getCroppedCanvas({ width: 200, height: 200 }).toBlob(function(blob) {
var formData = new FormData();
formData.append('file', blob, 'avatar.jpg'); // 第三个参数设文件名，避免后端 MIME 推断出错
upload.post('/api/upload-avatar', formData, function(res) {
$('#avatar').attr('src', res.data.url).css('border-radius', '50%');
});
});
- 漏掉
formData.append()的第三个参数（文件名），部分后端框架（如 Spring Boot）会无法识别文件类型 - 不要用
toDataURL()后再 base64 解码传，大图易触发 URL 长度限制或内存溢出 -
upload.post的 success 回调里才该更新 DOM，别在choose或裁剪确认时就改src，那时图还没上传成功
最容易被忽略的一点：cropper 初始化前，<img> 的 src 必须是 dataURL，不能是空或占位符；否则 canvas 渲染空白，裁剪框拖不动、缩放失效——这问题不报错，只“看起来能用”，实则裁的全是黑块。
