上传进度条异常？可能是这些原因在作怪

你有没有遇到过这种情况：传个文件，进度条走到90%突然不动了，或者直接卡在0%，刷新页面也没用。尤其是赶着交材料的时候，这种问题特别让人抓狂。其实在开发工具的使用中，上传进度条异常并不少见，背后的原因也五花八门。

前端监听逻辑出问题

很多开发者依赖 XMLHttpRequest 的 onprogress 事件来更新进度条。但如果你忘了在 send() 之前绑定事件，或者在某些浏览器环境下没做兼容处理，进度条就可能压根不更新。

<script>
const xhr = new XMLHttpRequest();
xhr.upload.onprogress = function(e) {
  if (e.lengthComputable) {
    const percent = (e.loaded / e.total) * 100;
    console.log(`上传进度：${percent}%`);
    // 更新进度条 DOM
    document.getElementById('progress').style.width = percent + '%';
  }
};
xhr.open('POST', '/upload', true);
xhr.send(formData); // 注意：事件必须在 send 前绑定
</script>

上面这段代码看着简单，但如果 onprogress 写在 send 后面，某些浏览器就不会触发，进度条自然就卡住了。

后端响应不及时或中断

有时候前端没问题，但后端处理慢，比如服务器磁盘写入阻塞、网络带宽打满，或者中间件（如 Nginx）设置了较小的 client_max_body_size，导致大文件被截断。这时候前端看起来像“卡住”，其实是连接已经断了，只是没及时反馈错误。

可以检查 Nginx 配置：

client_max_body_size 100M;
proxy_read_timeout 300;

太小的值会让大文件传到一半就被切断，进度条当然没法正常走完。

UI 更新频率太高，浏览器卡顿

有些开发者为了“丝滑”，每收到一个数据包就更新一次进度条。但上传过程中数据块很密集，短时间内触发上百次 DOM 操作，浏览器直接卡死，看起来就像进度条不动了。

解决办法是加个节流：

let lastUpdateTime = 0;
xhr.upload.onprogress = function(e) {
  const now = Date.now();
  if (e.lengthComputable && now - lastUpdateTime > 100) { // 每100ms最多更新一次
    const percent = (e.loaded / e.total) * 100;
    document.getElementById('progress').style.width = percent + '%';
    lastUpdateTime = now;
  }
};

这样既能保证流畅，又不会拖垮页面。

移动端兼容性坑

在安卓老版本 WebView 或某些国产浏览器里，XMLHttpRequest 的 progress 事件支持不完整。用户点了上传，进度条一直停在0%，其实文件已经在传了，只是没反馈。这时候可以考虑降级方案，比如用 iframe 模拟，或者引入第三方库如 axios 配合 AbortController 做更稳定的控制。

遇到上传进度条异常，别急着刷新。先打开开发者工具看 Network 面板，确认请求是否真的在传数据，再结合 Console 和 Response 判断是前端、后端还是网络的问题。很多时候，不是进度条坏了，而是我们没看到背后的细节。