仅单蚂蚁上传列表项答案

【问题标题】：Single ant upload list item only仅单蚂蚁上传列表项
【发布时间】：2017-06-02 15:36:02
【问题描述】：

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

【问题讨论】：

标签： javascript reactjs antd

【解决方案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])

【讨论】：

谢谢。不过，我认为您可能只想显示上载的最后一个文件。所以：this.state.fileList[this.state.fileList.length - 1]

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

你可以在这里查看文档 -> https://ant.design/components/upload/#components-upload-demo-fileList

【讨论】：