如何限制antd上传单个文件？

Question

 <Form.Item
    name="upload"
    label="Upload"
    valuePropName="fileList"
    getValueFromEvent={normFile}        
    multiple="false"        
  >
    <Upload accept=".csv" name="logo" multiple="false" action="/upload.do" listType="picture">
      <Button icon={<UploadOutlined />}>Click to upload</Button>
    </Upload>
  </Form.Item>

1. 我不想让用户只输入一个文件。
2. 另外如何在上传后读取该csv文件并将其发送到后端（仅参数）？

允许多个文件如下

Answer 1

第一个问题的解决方案非常简单。 Ant Design Upload 组件 API（现在？）包含

maxCount

，它限制/控制上传文件的数量。

将其设置为 1，这会将上传的文件数量限制为 1。如果用户选择另一个文件，它将替换之前选择的文件。

所以，你最终应该有这样的东西：

<Form.Item
   name="upload"
   label="Upload"
   valuePropName="fileList"
   getValueFromEvent={normFile}        
   multiple="false">
<Upload 
   accept=".csv" 
   name="logo" 
   multiple="false" 
   action="/upload.do" 
   listType="picture"
   maxCount={1}    //this is what limits the number of files uploaded
>
     <Button icon={<UploadOutlined />}>
        Click to upload
     </Button>
</Upload>
</Form.Item>

Answer 2

我通过Css处理这个问题，检查我的列表数组长度，如果为true，则为上传按钮定义一个类名，以防止单击。

const [list, setList] = useState(null);

<Dragger //its one of antd upload components
  {...settings}
  className={list?.length ? 'blocked' : undefined}
>

.blocked {
  pointer-events: none;
  opacity: 0.5;
}

Answer 3

maxCount 属性用于单个文件上传。 你检查一下。