能，XMLHttpRequest.upload.onprogress可监听上传进度，但需手动发请求、设CORS头、绑定xhr.upload.onprogress而非xhr.onprogress，且仅支持POST/PUT，配合FormData或ArrayBuffer使用。
XMLHttpRequest.upload.onprogress 能监听上传进度吗
能，但必须用 XMLHttpRequest 手动发请求，不能依赖 fetch（原生 fetch 没有上传进度事件）。onprogress 只在上传阶段触发，且要求服务端响应头包含 Access-Control-Allow-Origin，否则跨域时事件不会触发。
常见错误现象：onprogress 完全不执行，或只触发一次（0%），本质是服务端没返回正确 CORS 头，或前端没设置 xhr.upload.onprogress 而误设了 xhr.onprogress（那是下载进度）。
- 必须显式绑定
xhr.upload.onprogress，不是xhr.onprogress - 请求方式只能是
POST或PUT，且需手动构造FormData或写入ArrayBuffer - 如果上传的是大文件，建议加
xhr.timeout = 0防止超时中断
如何获取实时上传百分比和已传字节数
进度事件对象 event 里有三个关键属性：loaded（已上传字节数）、total（总字节数）、lengthComputable（是否可计算进度）。只有 lengthComputable === true 时 total 才可靠 —— 这取决于请求体是否为已知长度的二进制数据（如 File、Blob、ArrayBuffer），而非流式 ReadableStream。
容易踩的坑：total 在某些浏览器中对 FormData 可能不准（尤其含非 Blob 字段时），建议直接用 file.size 做分母更稳。
-
event.loaded是已上传字节数，单位是 byte -
event.total不一定等于文件大小，优先用file.size计算百分比 - 百分比公式：
Math.round((event.loaded / file.size) * 100) - 避免频繁更新 DOM，可用
requestAnimationFrame节流
完整可运行的 HTML5 上传进度监听示例
下面是一个最小可行示例，支持单文件上传 + 实时进度条 + 错误处理。注意：需后端配合接收 multipart/form-data，且返回正确 CORS 头。
<input type="file" id="fileInput"><progress id="progressBar" value="0" max="100"></progress><span id="percent">0%</span>
<p><script>
document.getElementById('fileInput').addEventListener('change', function(e) {
const file = e.target.files[0];
if (!file) return;</script></p><p>const xhr = new XMLHttpRequest();
const formData = new FormData();
formData.append('file', file);</p><p>xhr.upload.onprogress = function(event) {
if (event.lengthComputable) {
const percent = Math.round((event.loaded / file.size) * 100);
document.getElementById('progressBar').value = percent;
document.getElementById('percent').textContent = percent + '%';
}
};</p><p>xhr.onload = function() {
if (xhr.status === 200) {
console.log('上传成功');
} else {
console.error('上传失败:', xhr.statusText);
}
};</p><p>xhr.onerror = function() {
console.error('网络错误');
};</p><p>xhr.open('POST', '/upload', true);
xhr.send(formData);
});
</p>
为什么用 fetch 就不行
fetch 没有暴露上传过程的底层流控制，它的 body 是一次性写入的，无法监听中间状态。虽然可以封装成 ReadableStream + TransformStream 手动节流并计数，但那只是“模拟进度”，实际网络层仍不可见 —— 你看到的只是 JS 层读取文件的速度，不是真实上传到服务器的速度。
真正需要可信进度（比如断点续传、限速上传、用户取消上传），必须用 XMLHttpRequest。现代框架如 Axios 底层也是基于它封装的 onUploadProgress 钩子。
复杂点在于：多文件并发上传时，每个 xhr 要单独维护进度；取消上传得调用 xhr.abort()，且要清理对应 DOM 状态；服务端若分块接收（如 tus 协议），前端进度逻辑就得和后端协议对齐，不能只信 loaded/total。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
