layui upload上传后预览需分场景：选完即预览用choose回调+FileReader.readAsDataURL()；上传成功后预览则在done中设img.src，但须确保后端返回可访问的完整URL或手动拼接；推荐auto:false+choose预览更可控。
layui upload 上传后怎么立刻显示图片预览
直接用 layui.upload 的 done 回调拿不到临时 url，得自己生成 blob 或 filereader 预览。官方 demo 里那个 preview 参数只在选择文件时触发，不是上传成功后自动预览。
常见错误是以为 done 里直接给 img.src = res.data.url 就能显示——但后端返回的 URL 如果没开启跨域、或路径不对、或还没写入磁盘，浏览器会静默失败，控制台可能只报 net::ERR_FAILED，不提示具体原因。
- 选完文件立刻预览：用
choose回调 +FileReader.readAsDataURL() - 上传成功后再预览（更稳妥）：在
done里设置img.src，但必须确保后端返回的是可直接访问的完整 HTTP/HTTPS 地址 - 如果后端只返回相对路径（如
/upload/abc.jpg），前端要手动拼成完整地址，比如location.origin + res.data.url
layui upload 的 auto 和 bindAction 怎么选才不丢预览时机
auto: true 会让选完立刻上传，choose 回调里还来不及读取文件内容，done 又还没执行，预览逻辑容易断档；auto: false 则必须手动调 upload.render().upload()，但能确保你在上传前就完成预览。
真实场景中，用户点“上传”按钮前就想看到图——所以推荐关掉 auto，把预览放在 choose 里做，上传动作交给独立按钮触发。
-
auto: false+choose中用FileReader预览，最可控 - 如果启用了
auto: true，又想在上传中显示 loading 图，得配合before回调改 DOM，但预览仍得靠choose -
bindAction一般不用动，默认就是触发上传的元素，除非你把上传按钮和 file input 分开了
预览图模糊、变形、一闪而过？检查这几个地方
layui 自带的 preview 回调只传 file 对象，没做尺寸限制或格式校验，直接塞进 img 标签容易拉伸、溢出、甚至触发浏览器安全策略拒绝加载本地 file:// 路径。
典型现象：img 标签 src 是 blob:http://xxx/yyy，但页面刷新后失效；或者图片宽高没设，撑开布局；或者用户选了超大图（20MB+），FileReader 读取卡顿甚至崩掉主线程。
- 预览前统一限制最大宽高，用
canvas压缩再转dataURL（尤其移动端） - 给
img加max-width: 100%; height: auto;，避免溢出容器 - 读取失败时捕获
FileReader.onerror，降级显示文件名或占位图标 - 别用
URL.createObjectURL(file)后不revoke，内存泄漏风险高，尤其频繁操作时
后端返回的图片地址 404 或跨域，前端能做什么
layui 不处理响应头，done 回调拿到数据就交给你了。如果后端返回的地址 404，前端除了提示“上传成功但图片无法加载”，基本没法补救；但如果是因为跨域被浏览器拦截，可以提前让后端加 Access-Control-Allow-Origin，或者前端用代理绕过。
注意：Chrome 对 file:// 协议下请求 HTTP 地址有限制，开发时若用双击 HTML 打开，预览必然失败——必须走本地 server（如 http-server 或 nginx）。
- 上线前务必确认后端返回的是可公开访问的地址，不是内网路径（如
http://192.168.1.100/xxx） - 开发环境用
localhost，别用file://直接打开 HTML - 如果后端只能返回相对路径，前端拼地址时注意是否含协议，避免变成
http://current.com//upload/xxx（双斜杠）
