如何在Primereact FileUpload的uploadHandler中修改文件上传状态？

当启用customUpload后，FileUpload组件不会自动维护文件的上传状态，需要你手动通过状态管理来更新文件的上传状态（如上传中、成功、失败），核心是通过组件的files属性绑定自定义状态数组，在uploadHandler中完成上传逻辑后更新该数组。

实现步骤： #

1. 声明状态管理文件列表
   用React的useState钩子维护上传文件的状态：

   const [uploadedFiles, setUploadedFiles] = useState([]);
   

2. 配置FileUpload组件并处理上传逻辑
   将files属性绑定到自定义状态，在uploadHandler中处理上传，并更新文件状态：

   <FileUpload
     className={`w-full`}
     name="demo[]"
     customUpload={true}
     files={uploadedFiles}
     uploadHandler={async (event) => {
       const filesToUpload = event.files;
       
       // 遍历处理每个文件
       for (const file of filesToUpload) {
         // 标记为上传中
         const uploadingFile = { ...file, status: 'uploading' };
         setUploadedFiles(prev => [...prev, uploadingFile]);
         
         try {
           // 替换为你的实际上传API调用
           await fetch('/your-upload-endpoint', {
             method: 'POST',
             body: new FormData().append('file', file)
           });
           
           // 上传成功，更新状态为done
           setUploadedFiles(prev => prev.map(f => 
             f.name === file.name ? { ...f, status: 'done' } : f
           ));
         } catch (err) {
           // 上传失败，更新状态为error
           setUploadedFiles(prev => prev.map(f => 
             f.name === file.name ? { ...f, status: 'error' } : f
           ));
         }
       }
     }}
     // 自定义状态显示模板（可选）
     itemTemplate={(file) => (
       <div className="flex items-center gap-2 p-2">
         <span>{file.name}</span>
         {file.status === 'uploading' && <span className="text-blue-500">上传中...</span>}
         {file.status === 'done' && <span className="text-green-500">上传成功 ✅</span>}
         {file.status === 'error' && <span className="text-red-500">上传失败 ❌</span>}
       </div>
     )}
   />
   

关键说明： #

• 状态字段：文件对象的status属性支持ready（默认）、uploading、done、error四个值，组件会根据该值自动匹配对应样式
• 进度显示：如果需要展示上传进度，可以在上传过程中给文件对象添加progress属性（0-100的数值），更新状态时同步设置，组件会渲染进度条
• 状态同步：必须通过files属性绑定自定义状态，否则组件无法识别你手动更新的文件状态

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