如何从 axios 的 await 函数中获取 onUploadProgress 值？

Question

我比较陌生，无法在 onUploadProgress 回调中获取 axios 的进度值“progressEvent”，

我有两个文件，一个用于 api 调用，一个用于我的 react 组件：

这是我的 api.js 示例

function uploadImage(file) {
        return axios.post('/api/media_objects', file, {
            onUploadProgress: progressEvent => {
                let percentComplete = progressEvent.loaded / progressEvent.total
                percentComplete = parseInt(percentComplete * 100);
                console.log(percentComplete);
            }
        }).then(response => response.data.id);
    }

以及我的组件中的尝试/捕获

try {
    const upload = await xxxAPI.uploadImage(formData);

} catch (error) {

    console.log(error);
}

如何在“try”中检索“percentComplete”？

谢谢！

Answer 1

一般来说，我建议使用某种状态管理 (redux/mobx) 来控制此流程。不要直接从 React 组件处理它。所以组件会触发一种动作，上传过程会在外面处理。

但是，对于一个非常简单的解决方案，您需要这样的东西：

function uploadImage(file, updateProgress) {
  return axios.post('/api/media_objects', file, {
    onUploadProgress: progressEvent => {
      let percentComplete = progressEvent.loaded / progressEvent.total
      percentComplete = parseInt(percentComplete * 100);
      console.log(percentComplete);
      updateProgress(percentComplete);
    }
  }).then(response => response.data.id);
}

    const MyComponent = () => {
       const [progress, setProgress] = useState(0);
       
       const onUpload = useCallback(() => {
             myApi.uploadImage(data, setProgress);
       },[]);

       return <div>
                   <span>Uploaded: {progress}</span>
                   <button onClick={onUpload}>Upload</button>
             </div>;
    };

进度值存储在组件的状态中，因此可以更新和呈现。

我也会将 try/catch 放在 API 方法中，而不是放在组件中。

关于更一般的说明。我建议使用诸如react-uploady 之类的库来为您管理上传。在上传文件时，您通常需要处理许多边缘情况和功能，而像 Uploady 这样的小型第三方会为您处理：Preview with progress for file uploading in React