1

我正在使用react-dropzone将文件上传到我的反应应用程序中的服务器。一切都很好，但我想添加一个功能，如果文件由于其大小而需要很长时间上传，用户可以通过单击按钮取消该过程。

<Dropzone 
  multiple={ false }
  accept={ allowedMimeTypes }
  onDrop={ this.onDrop }
  onDragEnter={ this.onDragEnter }
  onDragLeave={ this.onDragLeave }
  className={ classes.dropzone }
  maxSize={ MAX_UPLOAD_BYTES }
  >
</Dropzone>
<button onClick={ this.onCancelUpload }>Cancel</button>

如果可以使用 react-dropzone，请告知。我想不出一种方法来停止已经触发并正在上传文件的事件。

4

1 回答 1

2

我能够使用Axios Cancel Token解决上述问题。

  1. 使用 Axios 将上传作为 Promise 处理。
  2. 在代码的开头创建一个源。
const CancelToken = axios.CancelToken;
let source = CancelToken.source();
  1. 将源传递给配置中的请求。
const {
  acceptedFiles
} = this.state;

const uploaders = acceptedFiles.map((file) => {
  const formData = new FormData();
  // data must be set BEFORE sending file
  formData.append('document', file);

  const uploadConfig = {
    onUploadProgress: (progressEvent) => {
      const progressUpload = (progressEvent.loaded * 100) / progressEvent.total;
      this.setState({
        progressUpload
      });
    },
    cancelToken: source.token,
  };

  return inkerzApi.post('/uploads/file', formData, uploadConfig)
    .then(response => response.data)
    .catch(() => console.log('Upload canceled'));
});

Promise.all(uploaders).then((filesMetadata) => {
  filesMetadata.forEach((metadata) => {
    if (metadata && metadata.mediaLink && metadata.totalPages) {
      this.onNewFileUploaded(metadata);
      // show success message here
    } else if (this.state.uploadCanceled) {
      // show cancelation notification here
      this.setState({
        uploadCanceled: false
      });
    }
  });
  this.setState({
    acceptedFiles: [],
    progressUpload: 0,
  });
});
  1. 在取消按钮上单击
onCancelUpload = () => {
        source.cancel('Operation canceled by the user.');
        source = CancelToken.source();
        this.setState({ uploadCanceled: true });
    }

这对我有用。希望这对其他人也有帮助。

于 2019-05-30T01:25:29.683 回答