Блог

Я хочу просто разрешить загрузку только одного изображения, поэтому, если пользователь снова нажмет кнопку загрузить, должно быть просмотрено только ОДНО изображение… не 2.

Я уже знаю, как справиться только с загрузкой 1 изображения, но не могу понять, как просмотреть только одно изображение, используя предварительный просмотр изображения Ant Upload.

Пример кода:

 import { Upload, Button } from 'antd';
import { UploadOutlined } from '@ant-design/icons';

const fileList = [
  {
    uid: '-1',
    name: 'xxx.png',
    status: 'done',
    url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
    thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
  }
];

ReactDOM.render(
  <>
    <Upload
      action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
      listType="picture"
      defaultFileList={[...fileList]}
    >
      <Button icon={<UploadOutlined />}>Upload</Button>
    </Upload>
    <br />
    <br />
    <Upload
      listType="picture"
      defaultFileList={[...fileList]}
    >
      <Button icon={<UploadOutlined />}>Upload</Button>
    </Upload>
  </>,
  mountNode,
);
  

Вам нужно сделать Upload компонент контролируемым компонентом, указав fileList prop.

 const [fileList, setFileList] = useState([...])

<Upload fileList={fileList}>
    <Button icon={<UploadOutlined />}>Upload</Button>
</Upload>
  

Если вы попробуете приведенный выше код, вы заметите, что при загрузке чего-либо ничего не происходит. Чтобы изменить его, вам необходимо изменить состояние при onChange обратном вызове загрузки. Смотрите эту ссылку для получения дополнительной информации о способе загрузки. onChange Чтобы просмотреть только одно изображение, просто установите состояние только для последней загрузки.

 const [fileList, setFileList] = useState([...])

const handleChange = (info) => {
    let fileList = [...info.fileList];

    // 1. Limit the number of uploaded files
    // Only to show the last recent uploaded files, and old ones will be replaced by the new
    fileList = fileList.slice(-1);
    setFileList(fileList);
};

<Upload fileList={fileList} onChange={handleChange}>
    <Button icon={<UploadOutlined />}>Upload</Button>
</Upload>
  

это также может помочь. Полный контроль над списком файлов