Как загрузить файлы с помощью PrimeReact FileUpload Component - PullRequest
Новая
       54

Как загрузить файлы с помощью PrimeReact FileUpload Component

0 голосов
/ 25 февраля 2020

Я новичок в React / Spring, и я не знаю, как сделать Fileupload с Primereact. Их документация гласит следующее (https://www.primefaces.org/primereact/# / fileupload ):

FileUpload требует свойства url в качестве цели загрузки и имени для идентификации файлов на сервере.

<FileUpload name="demo" url="./upload"></FileUpload>

Но здесь не говорится, как мне получить данные, как получить доступ к «демо» в бэкэнде, и какой ответ я получу.

Кто-нибудь может мне помочь? Я уже искал в Интернете, но ничего не нашел.

1 Ответ

0 голосов
/ 12 апреля 2020

Вы можете сделать что-то вроде этого: 

<FileUpload name="invoice"
    accept="image/*"
    customUpload={true}
    uploadHandler={invoiceUploadHandler}
    mode="basic"
    auto={true}
    chooseLabel="Upload invoice"/>

const invoiceUploadHandler = ({files}) => {
    const [file] = files;
    const fileReader = new FileReader();
    fileReader.onload = (e) => {
        uploadInvoice(e.target.result);
    };
    fileReader.readAsDataURL(file);
};

Отправьте ваш запрос вот так 

const uploadInvoice = (invoiceFile) => {
    let formData = new FormData();
    formData.append('invoiceFile', invoiceFile);

    const response = await fetch(`orders/${orderId}/uploadInvoiceFile`,
        {
            method: 'POST',
            body: formData
        },
    );
};

Важно: Не устанавливать Content-Type заголовок! Это будет сделано автоматически.

...