如何获取多个文件的上传进度？(React + React-dropzone + Axios + onUploadProgress)

Question

我正在尝试使用 React 和react-dropzone创建多重上传拖放。一切都很好，除了我似乎无法获取上传的进度信息，即使我正在使用onUploadProgress。

这是我正在使用的代码：

const onDrop = useCallback((acceptedFiles) => {
  acceptedFiles.forEach((file) => {
    let response = axios.put(`/api/files-endpoint`, file, {
      onUploadProgress: (progressEvent) => {
        console.log(`progress ${progressEvent}`);
      },
    });
  });

  setFiles(acceptedFiles);
}, []);

难道我做错了什么？在浏览器中，我尝试使用 Firefox 和 Chrome，甚至将连接限制为慢速 3G，看看它是否会在这些情况下触发该条件，但仍然没有运气。任何帮助表示赞赏。

Answer 1

axios 存储库中的上传示例使用 FormData 对象，请尝试调整您的代码以也使用 FormData

const onDrop = useCallback((acceptedFiles) => {
  acceptedFiles.forEach((file) => {
    const data = new FormData();
    data.append('file', file);
    let response = axios.put(`/api/files-endpoint`, data, {
      onUploadProgress: (progressEvent) => {
        console.log(`progress ${progressEvent}`);
      },
    });
  });

  setFiles(acceptedFiles);
}, []);