progress回调触发需同时满足四条件:layui≥2.5.5、auto:false、before中return false、后端支持multipart/form-data;漏return false将导致自动上传启动而跳过进度监听,n===100仅表示请求发完,非上传成功。

必须满足四个条件,progress 回调才会触发并显示真实百分比:Layui ≥ 2.5.5、auto: false、before 中 return false、后端支持 multipart/form-data。
为什么 progress 从不执行?
最常见原因是没切断自动上传流程。Layui 的 progress 只在「手动上传模式」下工作,而很多人写了 before 却忘了 return false,导致文件立刻发出,整个进度监听链被跳过。
-
before回调里不return false→ 自动上传启动 →progress被忽略 - 漏写
url配置 → 请求发不出去,自然没进度可报 - 后端返回非 200(如
413 Request Entity Too Large)→ 浏览器中断上传,progress停在某个值不再更新 - 传的是 base64 字符串(而非原生
File对象)→ 浏览器无法分段上报已发送字节数
多文件上传时进度条互相覆盖?
element.progress() 是靠 lay-filter 匹配 DOM 节点的。如果所有文件共用同一个 lay-filter="demo",后一个文件的进度会直接覆盖前一个。
- 每个文件需生成唯一标识,比如
"progress-" + index - HTML 中动态插入带不同
lay-filter的进度条:<div class="layui-progress" lay-filter="progress-0"></div> - 在
progress回调里调用element.progress("progress-" + index, n + "%") - 别忘了在
done或error后把对应进度条设为"100%",否则可能卡在 99%
n === 100 并不等于上传成功
progress 回调里的 n === 100 只表示浏览器已把请求体发完,但服务端可能还在处理、写磁盘、校验或网络 ACK 延迟——此时响应还没回来,done 还没触发。
- 在
progress里判断n === 100就隐藏 loading 或启用按钮,是典型错误 - 正确节奏:
progress管“发了多少”,done才是“服务器认了”,error是“服务器拒了” - 大文件场景下,
progress到 100% 后可能还要等几秒才进done,建议加中间态提示,比如“正在保存…” - IE9 及以下不支持
XMLHttpRequest.upload.onprogress,Nginx/PHP 默认上传限制(如client_max_body_size、upload_max_filesize)会导致进度卡在 99%,这和前端代码无关
真正容易被忽略的是:进度条本身不难,难的是把「发出去」「收回来」「出错了」三个状态和 UI 严格对齐;服务端配置一旦没调好,前端再怎么写也卡在 99%。











