如何获取多文件上传进度？（React+react-dropzone+Axios+onUploadProgress）

可能的问题与解决步骤 #

1. 未使用FormData包装文件（最常见原因） #

直接传递File对象给Axios时，部分场景下浏览器和Axios无法正确跟踪上传进度，标准的文件上传应该用FormData来封装文件：

修改后的代码示例：

const onDrop = useCallback((acceptedFiles) => {
  acceptedFiles.forEach((file) => {
    const formData = new FormData();
    formData.append('file', file); // 键名需与后端接口接收参数一致

    axios.put(`/api/files-endpoint`, formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
      },
      onUploadProgress: (progressEvent) => {
        const percent = Math.round((progressEvent.loaded * 100) / progressEvent.total);
        console.log(`当前上传进度：${percent}%`);
      },
    });
  });

  setFiles(acceptedFiles);
}, []);

2. 服务器端未启用分块传输 #

如果服务器端是等待文件完全接收后才返回响应，浏览器不会触发中间的上传进度事件。需要确认服务器是否配置了分块传输编码（Transfer-Encoding: chunked），确保在接收文件过程中持续向客户端反馈进度状态。

3. Axios版本存在bug #

部分旧版本Axios的onUploadProgress存在兼容性问题，执行以下命令升级到最新稳定版：

npm update axios

4. 请求拦截器覆盖了配置 #

检查项目中是否有全局Axios拦截器，是否意外覆盖了onUploadProgress回调。比如类似这样的代码会导致进度回调失效：

axios.interceptors.request.use(config => {
  // 错误示例：覆盖了原有的onUploadProgress
  config.onUploadProgress = null;
  return config;
});

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