如何使用PrimeReact FileUpload组件上传文件

Question

我是React/Spring的初学者，不知道如何使用Primerect上传文件。他们的文档说明如下(https://www.primefaces.org/primereact/#/fileupload)：

FileUpload需要一个url属性作为上传目标，并需要一个名称来标识后端的文件。

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

但它既没有说明我如何获取数据，如何访问后端的"演示"，也没有说明我得到了什么样的响应。

有人能帮我吗？我已经在网上搜索过了，但没有找到任何东西。

Answer 1

您可以这样做：

<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 = async (invoiceFile) => {
let formData = new FormData();
formData.append('invoiceFile', invoiceFile);
const response = await fetch(`orders/${orderId}/uploadInvoiceFile`,
{
method: 'POST',
body: formData
},
);
};

重要信息：请勿设置任何Content-Type标头！这将自动完成。