Загрузите документ на той же странице при использовании загрузки из antd

Question

Я использую компонент загрузки antd , чтобы позволить пользователю загружать документ.Теперь, после того как пользователь загрузил его, я также хочу разрешить ему загружать только что загруженное вложение.Я знаю, что документация объясняет это следующим образом:

import { Upload, Button, Icon } from 'antd';

const props = {
    action: '//jsonplaceholder.typicode.com/posts/',
    onChange({ file, fileList }) {
        if (file.status !== 'uploading') {
        console.log(file, fileList);
        }
    },
    defaultFileList: [{
        uid: '1',
        name: 'xxx.png',
        status: 'done',
        response: 'Server Error 500', // custom error message to show
        url: 'http://www.baidu.com/xxx.png',
    }],
    };

ReactDOM.render(
    <Upload {...props}>
        <Button>
        <Icon type="upload" /> Upload
        </Button>
    </Upload>,
    mountNode
);

Но я хочу разрешить загрузку на той же странице и не хочу открывать новое окно при нажатии.Как я мог это сделать?Есть ли лучший способ приблизиться к этому?

Answer 1

Поведение по умолчанию заключается в открытии файла в новом окне.

Вы можете переопределить это поведение, предоставив onPreview prop для Upload:

onPreview: функция обратного вызова будет выполняться при нажатии ссылки на файл или значка предварительного просмотра.

 <Upload
      //...
      onPreview={handlePreview}
    >

Теперь напишите свою собственную логику для загрузки файла в handlePreview.Вы можете найти много примеров в Интернете о том, как этого добиться.

const handlePreview = (file) => {
    console.log(file);
    // write how you want to download
}