最直接的方式是用 XMLHttpRequest 监听 upload.onprogress，需在 open() 后、send() 前绑定；onprogress 中通过 e.loaded 和 e.total 计算百分比，但 total 为 0 时无法准确计算。
用 XMLHttpRequest 监听 upload.onprogress 是最直接的方式
现代浏览器都支持 XMLHttpRequest 的上传事件监听，关键不是发请求，而是把 upload 属性的事件钩子挂上去。注意：必须在调用 open() 之后、send() 之前绑定，否则事件不会触发。
-
XMLHttpRequest.upload是一个独立对象，专门用于监听上传过程 -
onprogress回调里能拿到event.loaded（已上传字节数）和event.total（总字节数），二者都有才可算百分比 - 如果后端没返回
Content-Length或用了分块编码（chunked transfer encoding），event.total可能为 0，此时无法计算准确进度，只能显示“上传中…”
const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload');
xhr.upload.onprogress = function (e) {
if (e.lengthComputable) {
const percent = Math.round((e.loaded / e.total) * 100);
document.getElementById('progress').value = percent;
}
};
xhr.send(file);
fetch + ReadableStream 能实现但复杂度高
fetch 本身不提供上传进度回调，强行实现需要手动读取 File 并流式构造请求体，再用 ReadableStream 分段推送。这适合大文件切片上传场景，但日常单文件上传没
必要绕这么远。
- 必须用
file.arrayBuffer()或file.stream()获取原始数据流 - 需自己维护已发送字节数，并在每段
controller.enqueue()后更新 UI - 服务端必须支持流式接收（如 Node.js 的
req.on('data')），否则会出错 - Chrome 和 Edge 支持较好，Safari 对
file.stream()的支持仍有限制（例如不支持Blob直接转流）
表单提交时 FormData 不影响进度监听逻辑
无论你用 new FormData() 包裹 File 还是直接传 File，只要底层还是走 XMLHttpRequest 或 fetch，进度监听方式不变。重点在于传输层，而不是数据组织方式。
-
FormData.append('file', input.files[0])是常见写法，不影响upload.onprogress - 不要在
FormData里 append 太多字段，否则event.total会包含这些字段的字节数，导致进度条前期跳变（尤其文本字段大时） - 如果同时上传多个文件，每个
xhr实例要单独监听，不能共用一个onprogress
移动端或低版本浏览器要注意 ontimeout 和 onerror 的兜底
进度条卡在 99% 不动？很可能是网络中断、服务端超时或 CORS 预检失败，但 onprogress 不会告诉你这些。必须配对监听错误状态，否则用户以为还在传。
-
xhr.ontimeout和xhr.onerror必须显式设置，不能只靠onload - 部分安卓 WebView（如微信内置）对
upload.onprogress触发频率做限制，可能几秒才更新一次，别依赖高频刷新 - 上传大文件时，建议加个
xhr.timeout = 5 * 60 * 1000，避免长时间假死
进度条能显示的前提，是服务端响应头里有明确的 Content-Length，且前端没在请求头里误删 Content-Length（比如用 fetch 时手动设了空 headers）。这点容易被忽略，但一出问题就全盘失效。
