为何XMLHttpRequest上传进度的控制台日志无法显示？

针对你贴出的代码，上传进度没在控制台打印出来，可能是这些原因：

• 服务器未返回Content-Length响应头
  浏览器计算上传进度需要服务器返回的Content-Length头来获取总大小。如果服务器没提供这个头，e.total会是0，e.loaded/e.total就变成了NaN，控制台不会输出有效数值。你可以打开浏览器开发者工具的Network面板，找到对应的上传请求，查看响应头里是否存在Content-Length。

• 服务器采用分块传输编码（Transfer-Encoding: chunked）
  如果服务器用了分块传输，就不会返回Content-Length，这时progress事件即便触发，e.total也始终为0，计算出的进度没有意义。另外如果请求被浏览器缓存（比如之前传过相同文件），可能直接读取缓存，不会触发progress事件。可以在xhr.open之后加一行xhr.setRequestHeader('Cache-Control', 'no-cache')禁用缓存试试。

• 测试文件体积过小
  如果上传的文件特别小，整个上传过程瞬间完成，progress事件还没来得及触发就直接进入onload阶段了。换个几十MB的大文件测试，应该就能看到进度输出。

• 跨域请求配置问题
  如果apiUrl和当前页面不同域，服务器必须正确配置CORS规则，允许这个上传请求。要是CORS配置错误，请求可能直接失败，自然不会触发progress事件。去Network面板看看请求的状态码是否为正常的2xx。

• 请求头设置异常
  虽然你用了FormData，浏览器通常会自动设置Content-Type为multipart/form-data并带上正确的边界符，但如果服务器对请求头有特殊要求，可能导致上传流程异常，progress事件不触发。检查Network面板里的请求头是否符合服务器要求。

内容的提问来源于stack exchange，提问作者drh