使用Redux-Thunk/Axios从onUploadProgress事件调度操作

问题描述

以下代码可以正常上传文件，并且可以成功响应或失败，但是，我无法弄清楚如何从 onUploadProgress 事件调度我的 uploadFileProgress 操作.我可以 console.log 进度/百分比，当我尝试将分派包装在IIFE中时，触发分派不是函数错误.希望这是我所缺少的一个小问题.预先感谢！

The following code uploads a file no problem and responds successfully or failing as expected, however, I cannot figure out how to dispatch my uploadFileProgress action from the onUploadProgress event. I can console.log the progress / percentage and when I try to wrap the dispatch in an IIFE, I trigger a dispatch is not a function error. Hopefully this is a small issue I'm missing. Thanks in advance!

export function uploadFile(values, callback = () => {}) {
  const uploadFileData = new FormData();
  uploadFileData.append('fileName', values.fileName);
  uploadFileData.append('file', values.file);
  uploadFileData.append('file', {
    filename: values.filename,
    contentType: values.contentType,
  });
  const uploadProgress = {
    onUploadProgress: (ProgressEvent) => {
      let progressData = 0;
      const totalLength = ProgressEvent.lengthComputable ? ProgressEvent.total : ProgressEvent.target.getResponseHeader('content-length') || ProgressEvent.target.getResponseHeader('x-decompressed-content-length');
      if (totalLength !== null) {
        progressData = Math.round((ProgressEvent.loaded * 100) / totalLength);
      }
      return function action(dispatch) {
        dispatch(uploadFileUpload(progressData));
      };
    },
  };
  const configPlusProgress = Object.assign(uploadProgress, config);
  const request = () => axios.post(myURL, uploadFileData, configPlusProgress);
  return function action(dispatch) {
    dispatch(uploadFileLoading(true));
    return request()
      .then((response) => {
        if (response.status !== 201) {
          dispatch(uploadFileFail());
          throw Error(response.statusText);
        }
        dispatch(uploadFileLoading(false));
        return response;
      })
      .then(response => dispatch(uploadFileSuccess(response)))
      .then(() => callback())
      .catch(err => dispatch(uploadFileFail(err)));
  };
}

推荐答案

在返回的函数中移动您的请求配置(其中可以访问 dispatch 函数):

move your request config inside returned function (where dispatch function will be accessible):

export function uploadFile(values, callback = () => {}) {
  const uploadFileData = new FormData();
  uploadFileData.append('fileName', values.fileName);
  uploadFileData.append('file', values.file);
  uploadFileData.append('file', {
    filename: values.filename,
    contentType: values.contentType,
  });
  return function action(dispatch) {
    const uploadProgress = {
      onUploadProgress: (ProgressEvent) => {
        let progressData = 0;
        const totalLength = ProgressEvent.lengthComputable ? ProgressEvent.total : ProgressEvent.target.getResponseHeader('content-length') || ProgressEvent.target.getResponseHeader('x-decompressed-content-length');
        if (totalLength !== null) {
          progressData = Math.round((ProgressEvent.loaded * 100) / totalLength);
        }

        dispatch(uploadFileUpload(progressData));
      },
    };
    const configPlusProgress = Object.assign(uploadProgress, config);
    const request = () => axios.post(myURL, uploadFileData, configPlusProgress);

    dispatch(uploadFileLoading(true));
    return request()
      .then((response) => {
        if (response.status !== 201) {
          dispatch(uploadFileFail());
          throw Error(response.statusText);
        }
        dispatch(uploadFileLoading(false));
        return response;
      })
      .then(response => dispatch(uploadFileSuccess(response)))
      .then(() => callback())
      .catch(err => dispatch(uploadFileFail(err)));
  };
}

onUploadProgress 也应该只是抓取上传进度事件.

Also onUploadProgress should just dipatch upload progress event.

这篇关于使用Redux-Thunk/Axios从onUploadProgress事件调度操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！