Question

我正在使用ant设计来上传带有此表单输入的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',
          )
        ),
      )

该表单允许多次上传，新的上传内容会附加到＆＃34; ant-upload-list-item＆＃34;。如何防止追加，只保留最新的项目？

Answer 1

我尝试了以下代码，该代码对于上传单个文件和更新上传的文件名非常有用。

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

Answer 2

如果我们允许在文件选择弹出窗口中选择多个文件，那么您指定的multiple道具是有意义的，所以它对您没有帮助。

没有立即显示最后一次上传的方法，但使用fileList属性可以实现自己的显示来实现。见https://ant.design/components/upload/#components-upload-demo-fileList

Answer 3

将 maxCount 属性设置为 1。它将用新文件替换之前的上传。

您可以在此处查看文档 -> https://ant.design/components/upload/#components-upload-demo-fileList

仅限单个蚂蚁上传列表项

3 个答案: