React项目中axios onUploadProgress失效问题排查求助

以下是几个常见的排查方向，按优先级逐一验证：

• 检查后端是否返回Content-Length响应头
  如果后端启用了分块传输编码（Chunked Transfer Encoding），响应头会带Transfer-Encoding: chunked，此时axios无法获取total值，可能直接跳过进度回调。需要后端在处理文件上传时，主动返回Content-Length头，明确告知文件总大小。

• 验证请求拦截器是否修改了配置
  检查项目中是否存在axios请求拦截器，确认拦截器没有意外覆盖或移除onUploadProgress属性。比如类似这样的代码可能会导致问题：

  axios.interceptors.request.use(config => {
    // 错误示例：不小心重置了config的回调
    config.onUploadProgress = null;
    return config;
  });
  

• 排查axios版本兼容性
  近期若升级过axios，可能存在版本变更导致的回调逻辑差异。可以临时回退到之前功能正常的版本（比如从1.x回退到0.27.x）测试，确认是否是版本问题。

• 确认FormData构造正确
  上传前打印formData内容，确保文件已正确添加到表单中。如果FormData为空或文件未被正确挂载，请求会瞬间完成，进度回调不会触发。示例调试代码：

  console.log('上传文件：', formData.get('file')); // 替换为你的文件字段名
  

• 测试大文件上传场景
  若上传的是极小文件（几KB以内），请求可能在瞬间完成，axios来不及触发进度回调。换用几百MB的大文件测试，验证回调是否正常触发。

• 排除代理/CDN的影响
  部分代理服务器或CDN会缓冲整个请求后再转发给后端，导致axios无法实时获取上传进度。可以直接连接后端服务（绕过代理）测试，确认是否是中间层的问题。

调试代码建议 #

在请求中添加日志，确认回调是否被正确传入：

const uploadConfig = {
  headers: {
    'Authorization': `Bearer ${user.token}`
  },
  onUploadProgress: ({ loaded, total }) => {
    console.log('上传进度：', loaded, total); // 打印进度数据
    setShowModal(true);
    setProgress(Math.floor((loaded * 100) / total));
  }
};

console.log('请求配置：', uploadConfig); // 确认onUploadProgress存在

axios.post(`${process.env.REACT_APP_BEHOST}/user/upload`, formData, uploadConfig);

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