用 XMLHttpRequest 上传文件时进度条不更新怎么办？

技术晨旭提问于 2026-02-26 01:50:20 阅读 13

交互

我用 XMLHttpRequest 做了个文件上传功能，想加个进度条，但 onprogress 回调根本没触发。试过把监听写在 open 之前和之后，都不行。后台接口是正常的，文件能传上去。

这是我的代码：

const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload');
xhr.upload.onprogress = function(e) {
  if (e.lengthComputable) {
    console.log('进度：', e.loaded / e.total);
  }
};
xhr.send(formData);

控制台完全没输出，是不是哪里顺序错了？还是服务器要配什么头？

文件上传

我来解答赞 7 收藏

反馈

1 条解答

FSD-佼佼 Lv1

你代码顺序没问题，问题出在后端没返回 Content-Length 头，所以 e.lengthComputable 是 false，自然进不去 if 里。
加一句后端返回 Content-Length 头就行，或者你先临时去掉 if 判断看看有没有值：

xhr.upload.onprogress = function(e) {

  console.log('loaded:', e.loaded, 'total:', e.total);

};

如果 total 是 0 就是后端没传 Content-Length，加个 header('Content-Length: ' . filesize($file))（PHP）或者对应语言的响应头就行，差不多就行。

2026-02-26 03:00