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

Posted 2023-02-22

【中文标题】如何使用 PrimeReact FileUpload 组件上传文件

【英文标题】：How to upload files using PrimeReact FileUpload Component

【发布时间】：2020-06-08 20:38:00

【问题描述】：

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

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

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

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

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

【参考方案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 标头！这将自动完成。