React Dropzone 取消文件上传单击按钮

Question

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

<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，请告知。我想不出一种方法来停止已经触发并正在上传文件的事件。

Answer 1

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

1. 使用 Axios 将上传作为承诺处理。
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,
  });
});

4. 点击取消按钮

onCancelUpload = () => {
        source.cancel('Operation canceled by the user.');
        source = CancelToken.source();
        this.setState({ uploadCanceled: true });
    }

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