Fetch API 上传文件没有进度怎么办：XMLHttpRequest 与现代浏览器反馈怎么选

文件上传页面里，最容易让人误判的是“请求已经发出，但进度条一直不动”。问题通常不在服务端接收，而在浏览器 API 的能力边界：标准 Fetch API 可以发送 FormData，却没有一个在主流浏览器中普遍可用的上传进度事件；如果页面必须实时显示已上传百分比，XMLHttpRequest 仍是更稳妥的选择。

先判断：页面真的需要上传百分比吗

头像、附件和导入文件通常只需要“准备中、上传中、完成、失败”四种状态。此时 Fetch 的代码更短，也更容易和 async/await、AbortController 组合。只有当文件较大、用户需要预估剩余时间，或者产品明确要求显示百分比时，才值得引入 XMLHttpRequest 的上传事件。

别把下载进度和上传进度混在一起。Fetch 的 Response.body 可以处理部分下载场景，但这不等于请求体上传也有同样的进度读取方式。

Fetch 版本：用状态反馈替代伪进度

const controller = new AbortController();
const form = new FormData();
form.append('file', fileInput.files[0]);

status.textContent = '正在上传';
try {
  const response = await fetch('/upload', {
    method: 'POST',
    body: form,
    signal: controller.signal
  });
  if (!response.ok) throw new Error(`HTTP ${response.status}`);
  const result = await response.json();
  status.textContent = result.ok ? '上传完成' : '服务端未接收';
} catch (error) {
  status.textContent = error.name === 'AbortError' ? '已取消' : '上传失败';
}

这里没有把“正在上传”伪装成 37% 或 82%。百分比没有证据时，确定性的状态文案反而更可信。点击取消时调用 controller.abort()，按钮也要同步禁用，避免用户在旧请求尚未收尾时重复点击。

需要百分比时：监听 XMLHttpRequest 上传事件

function uploadWithProgress(file, onProgress) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('POST', '/upload');
    xhr.upload.onprogress = (event) => {
      if (event.lengthComputable) {
        onProgress(Math.round(event.loaded / event.total * 100));
      }
    };
    xhr.onload = () => {
      if (xhr.status >= 200 && xhr.status  reject(new Error('network error'));
    xhr.onabort = () => reject(new DOMException('取消上传', 'AbortError'));
    const form = new FormData();
    form.append('file', file);
    xhr.send(form);
  });
}

lengthComputable 为假时不要强行计算百分比，因为浏览器没有可靠的总长度。服务端返回成功也不代表页面状态一定正确，仍要检查 JSON 中的业务字段、文件名和后续列表刷新结果。

几个容易踩到的边界

不要手动设置 multipart 的 Content-Type

把 FormData 交给 Fetch 或 XMLHttpRequest 后，浏览器会补上 multipart boundary。手动写死 multipart/form-data，常见结果是服务端解析不到文件。

进度条完成不等于业务完成

100% 只说明请求体传完了，后端还可能在校验、落盘或生成缩略图。进度条完成后保留“处理中”状态，直到响应里的业务状态明确为成功才算上传完成。

取消后要清理旧状态

取消上传的时候要清空本地进度、恢复文件选择按钮状态，下次选择文件要创建全新的请求对象，不要复用已经 abort 的 XMLHttpRequest 实例。

最后怎么选

只要一个可靠的上传结果提示，优先用 Fetch；必须实时展示上传百分比的场景，就选择 XMLHttpRequest，同时要把进度事件只当作前端展示信息，不能当成业务成功的判定凭据。不管选哪一种实现路径，都要覆盖成功、网络失败、服务端拒绝、用户手动取消、重复点击这五类常见场景。

常见问题

Fetch 能不能通过定时器模拟上传进度？

可以做加载等待动画，但不能把这种效果标注成真实上传进度。没有已上传字节和总字节的可靠统计数据时，所谓的进度百分比只能是人工模拟的估算值。

为什么 XMLHttpRequest 的进度有时没有回调？

检查是否监听了 xhr.upload 而不是只监听下载事件，并确认 event.lengthComputable 为真；跨域请求还要核对 CORS 和预检响应。

小文件也应该用 XMLHttpRequest 吗？

没必要强行替换成 XMLHttpRequest。如果产品本身就不需要展示上传百分比，Fetch 的取消逻辑、异常处理和请求组合实现起来通常更简单，只保留基础状态反馈就足够用了。