PrimeReact FileUpload自定义上传后如何清空内容并禁用按钮

核心方案 #

PrimeReact的FileUpload组件可通过ref获取实例调用内置clear()方法清空已选文件；按钮禁用则通过组件disabled属性结合状态变量控制。

具体实现 #

1. 定义ref与状态变量：用useRef绑定FileUpload实例，用useState管理按钮禁用状态。
2. 修改组件属性：给FileUpload添加ref绑定与disabled属性关联。
3. 上传成功后执行操作：在请求回调里调用清空方法并设置禁用状态。

完整代码示例 #

JSX部分 #

import { useRef, useState } from 'react';
import { FileUpload } from 'primereact/fileupload';

// 初始化ref与状态
const fileUploadRef = useRef(null);
const [isBtnDisabled, setIsBtnDisabled] = useState(false);

return (
  <FileUpload 
    ref={fileUploadRef}
    name="files" 
    url={url}
    action="post"
    customUpload
    uploadHandler={Upload}
    multiple 
    accept="*/*"
    maxFileSize={100000000}
    disabled={isBtnDisabled} // 绑定禁用状态
  />
);

上传处理器修改 #

const Upload = (event) => {
  const formData = new FormData(); // 初始化FormData
  event.files.forEach(file => {
    formData.append("files", file);
  });
  
  axios({
    method: "POST",
    url: url,
    data: formData,
    headers: {
      "Content-Type": "multipart/form-data",
    }
  }).then(res => {
    // 清空已选文件列表
    fileUploadRef.current.clear();
    // 禁用上传、清除按钮
    setIsBtnDisabled(true);
  }).catch(err => {
    // 可选：上传失败时可重置状态或提示错误
    console.error('上传失败:', err);
  });
};

补充说明 #

• clear()是FileUpload内置方法，通过ref调用可直接清空文件列表。
• disabled属性会同时禁用组件的「上传」和「清除」按钮，满足需求。
• 若需重新启用按钮，调用setIsBtnDisabled(false)即可。

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