时间戳

首页 > 解决方案 > 如何使用 PrimeReact FileUpload 组件上传文件

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

问题描述

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

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

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

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

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

标签： reactjsspringweb-applicationsprimereact

解决方案

You can do something like this:

<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);
};

Send your request like this

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

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

Important: Do not set any Content-Type header! This will be done automatically.

推荐阅读