如何告诉自定义onSuccess函数停止Ant Design Upload组件中的上传微调器？

Question

我有这段代码：

render() {
    const props = {
      onChange: this.handleChange,
      multiple: true,
      name: 'datafiles[]',
      defaultFileList: this.initialState.fileList,
      listType: "text",
      onSuccess: (resp, file, xhr) => {
        file.status = 'done';
        const newDatafile = {
          filename: file.name,
          s3ObjectKey: `${this.props.userId}/${this.props.datasetId}`,
          filesizeBytes: file.size
        }
        this.props.saveNewDatafile(newDatafile, (saveError, savedJob) => {
            //Yadda yadda
        })
      },
      showUploadList: {
        showPreviewIcon: true,
        showRemoveIcon: true
      },
      customRequest: customRequest
    };

如您所见，我正在使用customRequest。如果我没有通过onSuccess功能，则该组件在成功时正常工作。但是当我通过它时，进度条到达结尾，但它仍然显示微调器，好像它仍在上传。

文件名前的讨厌的微调器

如何告诉上传组件上传完成？我试图用file.status = 'done'试图修复它，但没有运气。我需要自定义onSuccess功能，因此我可以调用saveNewDatafile函数。

Answer 1

我通过使用onChange函数而不是onSuccess函数修改它，并添加条件if (file.status === 'done')

Answer 2

在深入研究上传组件的src后，我认为不可能使用customRequest来控制上传状态，我们已经开始在回调onSuccess中设置状态。

https://github.com/ant-design/ant-design/blob/d89ffcc5b22cd7a722e1d9740f2f6f04c014f09b/components/upload/Upload.tsx#L77-L97

也就是说，我在the repo of antd中找到了一个手动上传的示例。

似乎antd更喜欢回调onChange而不是直接onSuccess / onError。

Answer 3

const preventRequest = () => false;

<Upload beforeUpload={preventRequest}>
  <Button>
    <Icon type="upload" /> upload
  </Button>
</Upload>