绝大多数情况是未正确绑定xhr.upload.onprogress，必须在xhr.open()后、xhr.send()前设置；若绑错对象（如xhr.onprogress）或后端未返回Content-Length，则事件不触发。
XMLHttpRequest.upload.onprogress 为什么没触发
绝大多数情况是没给 XMLHttpRequest 实例绑定 upload.onprogress，或者绑得太晚——必须在调用 send() 之前绑定，且不能在 open() 之前。另外，onprogress 只对上传过程有效，对下载（onload 等）无效，别误配到 xhr.onprogress（这个不存在）。
常见错误写法：xhr.onprogress = handler —— 这是错的，正确路径是 xhr.upload.onprogress。
- 必须使用
xhr.upload.onprogress，不是xhr.onprogress - 绑定时机：在
xhr.open()之后、xhr.send()之前 - 仅适用于非同源请求时开启 CORS；若后端未返回
Access-Control-Allow-Origin，控制台会静默失败（无报错但不触发） - 本地文件（
file://协议）下部分浏览器禁用upload.onprogress，建议用本地服务器测试（如python3 -m http.server）
怎么算出准确的上传百分比
进度事件对象（ProgressEvent）提供 loaded 和 total 两个只读属性。loaded 是已上传字节数，total 是文件总大小（注意：仅当后端支持 Content-Length 且未分块传输时才可靠）。所以百分比就是 Math.round((e.loaded / e.total) * 100)。
但要注意：某些服务端框架（如 Express 默认、Nginx 默认配置）可能不透传原始 Content-Length，或使用流式解析导致 e.total === 0。此时 e.total 为 0，除零会得 NaN。
- 务必检查
e.total > 0再计算，否则显示NaN% - 如果
e.total === 0，说明服务端未声明长度，只能显示“上传中…”或用其他方式估算（如分片上传自维护计数） -
e.lengthComputable是更规范的判断依据：只有为true时e.total才可信
完整可运行示例（含防错逻辑）
上传中：${percent}%
这段代码能跑通的前提是后端接收 multipart/form-data 或原始二进制流，并且响应头包含 Access-Control-Allow-Origin: *（开发环境）或对应域名。
和 Fetch API 的 upload 进度对比有什么坑
Fetch 本身不支持上传进度监听——它没有 upload 属性。想用 Fetch 实现进度，必须手动分片读取 Blob + ReadableStream + AbortController，复杂度陡增。而 XMLHttpRequest 是目前唯一原生支持简单上传进度监听的标准方案。
如果你正在用现代框架（如 React/Vue），注意不要在组件卸载后还试图更新 state（比如 setState({ progress })），否则会触发警告甚至报错。建议加一个闭包标记或用 AbortSignal 配合清理。
真正容易被忽略的是：即使所有 JS 逻辑都对，如果后端用了代理（如 Nginx）、WAF 或 Serverless 函数，它们可能缓冲整个请求体再转发，导致客户端看到的 loaded 增长“卡顿”或直接跳到 100%。这时得查中间层配置，而不是改前端。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
