progress回调不触发需同时满足四条件:layui≥2.5.5、auto:false、before中return false、url正确且后端支持multipart/form-data;多文件上传时lay-filter必须唯一;n===100仅表示请求发完,非上传成功。

progress 回调不触发?先检查这四个硬性条件
layui 的 progress 回调根本不会执行,90% 的情况是因为没满足底层运行前提。它不是“写了就能用”的普通回调,而是依赖特定上传模式的事件监听机制。
-
layui.version必须 ≥ 2.5.5(旧版压根没这个字段) -
auto: false—— 默认是true,此时 layui 直接发请求,跳过整个进度链 -
before回调里必须显式return false,仅定义before函数不够,漏掉这句就自动上传 -
url配置正确,且后端接收方式为multipart/form-data(传base64或 JSON body 会导致浏览器无法上报loaded/total)
多文件上传时进度条互相覆盖?lay-filter 必须唯一
所有文件共用同一个 lay-filter="demo",结果就是后一个文件的进度值直接刷掉前一个——element.progress() 是靠 lay-filter 查 DOM 节点的,没有“按文件实例隔离”这回事。
- 每个文件生成独立标识,例如
"progress-" + index - HTML 中动态插入对应节点:
<div class="layui-progress" lay-filter="progress-0"></div> - 在
progress回调里调用:element.progress("progress-" + index, n + "%") - 别忘了在
done或error里手动设为"100%",否则可能卡在 99%
n === 100 并不等于上传成功,这是最常踩的逻辑坑
progress 回调里的 n === 100 只表示浏览器已把整个请求体发出,不代表服务端已接收、校验、写入完成。此时响应还没回来,done 还没触发。
- 错误做法:在
progress里判断n === 100就隐藏 loading、启用按钮、跳转页面 - 正确节奏:
progress管“发了多少”,done才是“服务器认了”,error是“服务器拒了” - 大文件场景下,
progress到 100% 后常要等几秒才进done,建议加中间态提示,比如“正在保存…”
进度卡在 99% 不动?大概率不是前端代码问题
IE9 及以下浏览器根本不支持 XMLHttpRequest.upload.onprogress,但更常见的是服务端限制导致连接被强制中断:Nginx 的 client_max_body_size、PHP 的 upload_max_filesize 或 post_max_size 默认值太小,上传中途断连,前端表现就是进度停住、无 error、也收不到 done。
- 排查顺序应是:先查服务端日志是否有
413 Request Entity Too Large,再确认 Nginx/PHP 配置是否调大 - 前端代码再严谨,服务端没放开限制,照样卡住
- 真实字节数无法直接从
obj或xhr拿到——layui 封装后不透出原生event.loaded和event.total,只能靠obj.files[0].size * (n / 100)反推已传字节数


















