xmlhttprequest.upload.onprogress 不触发的根本原因是监听对象错误，必须绑定到 xhr.upload 而非 xhr 本身，且需在 open() 后、send() 前设置；若后端未返回 content-length 或被代理截断，e.lengthcomputable 将为 false，导致无法计算进度。
XMLHttpRequest.upload.onprogress 不触发？
根本原因通常是没监听对对象——onprogress 必须挂在 XMLHttpRequest.upload 上，而不是 XMLHttpRequest 实例本身。常见写法错误是直接写 xhr.onprogress = ...，这监听的是下载进度，上传时完全不触发。
- 正确写法：
xhr.upload.onprogress = function(e) { ... } - 必须在调用
xhr.open()之后、xhr.send()之前绑定 - 如果后端返回了
Content-Length，但前端仍收不到进度，检查是否用了fetch—— 它原生不支持上传进度，得切回XMLHttpRequest - 注意：Safari 对
upload.onprogress的触发频率较低，小文件可能只触发一次，别当成 bug
FormData.append() 传大文件卡顿怎么办？
不是进度条的问题，是文件还没开始传，JS 就在同步读取二进制内容。尤其用 FileReader.readAsArrayBuffer() 或手动转 Blob 时，容易把主线程堵死。
- 避免提前读取：直接把
File对象塞进FormData.append('file', file)，让浏览器在send()时流式上传 - 不要用
URL.createObjectURL(file)再 fetch，这会多绕一层，且无法获取真实上传进度 - 若需预览或校验（如图片尺寸），用
File.slice()取前几 KB 异步处理，别全量读 - 超过 100MB 的文件，建议加
AbortController和分片逻辑，否则用户点取消也没响应
进度条数值跳变或卡在 99%？
本质是服务端没正确返回 Content-Length，或者中间有代理/CDN 截断了响应头。浏览器靠 e.total 计算百分比，如果 e.total === 0，就只能靠估算或干脆不显示。
- 先 console.log(e) 看
e.lengthComputable是否为false—— 是的话，后端缺失Content-Length响应头 - Node.js + Express 场景：确保没开
res.flush()类操作，禁用 chunked transfer encoding - Nginx 默认会删掉
Content-Length，加配置：proxy_http_version 1.1;和proxy_buffering off; - 开发时可用 curl 测试：
curl -I http://your-api/upload，确认响应头含Content-Length: xxx
input[type="file"] 多选后怎么逐个显示进度？
每个文件得单独发请求，不能共用一个 XMLHttpRequest。否则所有文件进度混在一起，e.loaded 是累计值，没法拆解。
- 对
input.files数组遍历，为每个File创建独立XMLHttpRequest实例 - 用闭包或
let绑定当前文件名，避免循环中变量被覆盖 - 别用
for...in遍历FileList，它不是普通数组，用Array.from(input.files)转换更稳 - 并发上传数控制在 3–5 个以内，太多会触发浏览器连接限制，反而拖慢整体速度
e.lengthComputable 就变 false，前端再怎么绑 onprogress 都白搭。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
