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

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 函数，那么该组件将成功正常运行。但是当我通过的时候，进度条走到尽头了，但是还是显示spinner，好像还在上传。

文件名前讨厌的微调器

如何通知上传组件上传完成？我尝试使用 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>

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

How do I tell the custom onSuccess function to stop the upload spinner in Ant Design Upload component?

javascript

reactjs

antd