4

我正在使用 ant design 使用此表单输入上传 csv：

ce(Form.Item, { className: 'form_input' },
        ce(Upload, { onChange: handleFileChange, className:'csv', multiple: false },
          ce(Button, { type: 'ghost' },
            ce(Icon, { type: 'upload' }), ' Choose File',
          )
        ),
      )

该表单允许多次上传，新的上传被附加到“ant-upload-list-item”。如何防止追加并只保留最新的项目？

4

3 回答 3

5

我尝试了下面的代码，这对我上传单个文件和更新上传的文件名很有效。

const props = {
    name: 'file',
    multiple: false,
    showUploadList: {
        showDownloadIcon: false,
    },
    onRemove: file => {
        this.setState(state => {
            return {
                fileList: []
            };
        });
    },
    beforeUpload: file => {
        this.setState(state => ({
            fileList: [file]
        }))
        return false;
    },
    fileList
}

可以同时用于 Upload 和 Dragger

<Dragger {...props} >
  <p className="ant-upload-drag-icon">
      <Icon type="cloud-upload" />
  </p>
  <p className="ant-upload-text">Click or drag file to this area to upload</p>
</Dragger>

<Upload {...props} accept=".asc,.pem,.pub" style={{ width: '100%' }} tabIndex={3}>
    <Button disabled={is_view} style={{ width: '100%' }}>
        <Icon type="upload" />
        {this.state.fileList && this.state.fileList[0] && this.state.fileList[0].name ? this.state.fileList[0].name : 'Click to Upload'} 
    </Button>
</Upload>

提交时-

 const formData = new FormData()
 formData.append('file', this.state.fileList[0])
于 2020-02-28T09:57:35.480 回答
4

您指定的multiple道具与我们是否允许在文件选择弹出窗口中选择多个文件有关，因此在这里对您没有帮助。

没有直接的方法只显示最后一次上传，但使用该fileList属性您可以实现自己的显示来完成此操作。见https://ant.design/components/upload/#components-upload-demo-fileList

于 2017-06-04T12:06:08.823 回答
1

Set the maxCount property to 1. It will replace the previous upload with the new file.

You can check the documentation here -> https://ant.design/components/upload/#components-upload-demo-fileList

于 2021-06-24T09:37:22.067 回答