如何移除PrimeReact FileUpload上传按钮并绑定上传行为到自定义提交按钮？

要实现通过页面提交按钮统一上传文件和其他内容，只需按以下步骤修改代码即可：

关键修改点 #

• 隐藏FileUpload自带的上传按钮
• 通过Ref获取FileUpload实例，在提交按钮点击时触发上传逻辑
• 自定义上传处理函数，整合文件与其他表单数据统一提交

修改后的完整代码 #

import { FileUpload } from 'primereact/fileupload';
import { Button } from "primereact/button";
import React, { useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';

const InfoChangeRequest = () => {
  const { t } = useTranslation();
  const fileUploadRef = useRef(null);
  // 示例：存储其他表单数据（根据你的实际需求调整）
  const [formData, setFormData] = useState({
    userName: '',
    userEmail: ''
  });

  // 自定义上传逻辑：整合文件与其他表单数据
  const handleUpload = (event) => {
    const files = event.files;
    if (files.length === 0) return;

    // 创建FormData对象，用于打包文件和表单数据
    const submitData = new FormData();
    // 添加选中的文件
    files.forEach(file => {
      submitData.append('demo[]', file);
    });
    // 添加其他表单数据
    Object.entries(formData).forEach(([key, value]) => {
      submitData.append(key, value);
    });

    // 发送上传请求（替换为你的实际接口地址）
    fetch('/api/upload', {
      method: 'POST',
      body: submitData
    })
    .then(res => res.json())
    .then(result => {
      console.log('上传成功', result);
      // 上传完成后清空已选文件
      fileUploadRef.current.clear();
    })
    .catch(err => {
      console.error('上传失败', err);
    });
  };

  // 提交按钮点击事件：触发上传
  const handleSubmit = () => {
    if (fileUploadRef.current) {
      fileUploadRef.current.upload();
    }
  };

  return (
    <>
      <div className="card">
        {/* 示例：其他表单输入项 */}
        <div className="mt-2">
          <input
            type="text"
            placeholder={t('userName')}
            value={formData.userName}
            onChange={(e) => setFormData({...formData, userName: e.target.value})}
            className="w-full p-2 border rounded"
          />
        </div>
        <div className="mt-2">
          <input
            type="email"
            placeholder={t('userEmail')}
            value={formData.userEmail}
            onChange={(e) => setFormData({...formData, userEmail: e.target.value})}
            className="w-full p-2 border rounded"
          />
        </div>

        <div className="mt-4">
          <FileUpload
            ref={fileUploadRef}
            name="demo[]"
            multiple
            accept="image/*"
            maxFileSize={1000000}
            emptyTemplate={<p className="m-0">{t("fileUploadDefaultText")}</p>}
            chooseLabel={t("choose")}
            cancelLabel={t("cancel")}
            customUpload={true}
            uploadHandler={handleUpload}
            showUploadButton={false} {/* 隐藏自带上传按钮 */}
            onSelect={(e) => console.log('选中文件列表', e.files)}
          />
        </div>

        <div className="flex flex-wrap justify-content-center mt-5">
          <Button
            label={t("submit")}
            icon="pi pi-check"
            className="p-3"
            onClick={handleSubmit} // 绑定提交按钮的上传触发事件
          />
        </div>
      </div>
    </>
  );
};

export default withTranslation()(InfoChangeRequest);

代码说明 #

1. 隐藏自带上传按钮：通过showUploadButton={false}直接移除FileUpload组件自带的上传按钮
2. Ref绑定组件：用useRef创建fileUploadRef并绑定到FileUpload，实现外部调用组件的upload()和clear()方法
3. 自定义上传逻辑：在handleUpload中创建FormData，同时添加选中的文件和其他表单数据，统一发送上传请求
4. 提交按钮触发上传：点击页面的提交按钮时，通过Ref调用FileUpload的upload()方法，触发自定义上传逻辑

内容的提问来源于stack exchange，提问作者Ekin