Блог

Главная - Вопросы по программированию - Как ограничить загрузку antd в один файл?

Как ограничить загрузку antd в один файл?

#reactjs #antd

#reactjs #antd

Вопрос:

  <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 после загрузки и отправить на серверную часть (только параметры)?

допускается использование нескольких файлов, как показано ниже

несколько файлов

Комментарии:

1. вы столкнулись с какой-либо ошибкой в этом коде. пожалуйста, укажите вопрос

2. @sharunkk на самом деле в этом случае загрузка позволяет пользователю вводить несколько файлов, однако я хочу, чтобы был разрешен только один файл

3. взгляните. codepen.io/pen /… . ни одна загрузка файлов не ограничена другим способом . вы можете сделать это fileList = fileList.slice(-1); или ограничить количество файлов с помощью оператора condition

4. @sharunkk вы можете изменить ссылку, я думаю, это неверно, спасибо

5. codesandbox.io/s/ihxgf

Ответ №1:

Решение вашего первого вопроса очень простое. API компонента загрузки Ant Design (сейчас?) содержит 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>

Ответ №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;
}