仅单个蚂蚁上传列表项

Question

我正在使用 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”。如何防止追加并只保留最新的项目？

Answer 1

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

没有直接的方法来仅显示最后上传的内容，但是使用该fileList属性，您可以实现自己的显示来实现这一点。参见https://ant.design/components/upload/#components-upload-demo-fileList

Answer 2

我尝试使用下面的代码，这对我上传单个文件和更新上传的文件名来说效果很好。

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
}

可以同时用于上传和拖动器

<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])