React-Filepond多文件上传出错时onprocessfiles未触发的处理咨询

问题根源 #

onprocessfiles 回调仅在所有文件处理成功时触发，只要有一个文件出错，它就不会执行。要实现全处理完成后的逻辑，需换用其他回调跟踪状态。

解决方案：跟踪单个文件处理状态 #

通过监听单个文件的处理事件，维护处理计数，手动判断所有文件是否处理完毕，同时收集错误文件并清理成功文件的UI。

代码实现

import { useState, useRef } from 'react';
import { FilePond } from 'react-filepond';
import 'filepond/dist/filepond.min.css';

const FileUploader = () => {
  const [errorFiles, setErrorFiles] = useState([]);
  const [totalFileCount, setTotalFileCount] = useState(0);
  const [processedFileCount, setProcessedFileCount] = useState(0);
  const pondRef = useRef(null);

  // 文件添加到上传池时，记录总文件数
  const handleFileAdd = () => {
    if (pondRef.current) {
      setTotalFileCount(pondRef.current.getFiles().length);
      setProcessedFileCount(0);
      setErrorFiles([]);
    }
  };

  // 单个文件处理完成（成功/失败）时触发
  const handleSingleFileProcess = (error, file) => {
    setProcessedFileCount(prev => prev + 1);

    // 收集错误文件
    if (error) {
      setErrorFiles(prev => [...prev, file]);
    }

    // 判断所有文件是否处理完毕
    if (processedFileCount + 1 === totalFileCount) {
      // 全处理完成后的逻辑
      console.log('所有文件处理完成，错误文件列表：', errorFiles);
      
      // 移除上传成功的文件，仅保留错误文件
      if (pondRef.current) {
        const allFiles = pondRef.current.getFiles();
        const successFiles = allFiles.filter(f => !f.error);
        successFiles.forEach(file => pondRef.current.removeFile(file));
      }
    }
  };

  return (
    <FilePond
      ref={pondRef}
      allowMultiple={true}
      onaddfile={handleFileAdd}
      onprocessfile={handleSingleFileProcess}
      server={{
        // 替换为你的上传接口配置
        url: '/your-upload-api',
        process: {
          method: 'POST',
          // 按需添加headers、body等配置
        }
      }}
    />
  );
};

export default FileUploader;

关键逻辑说明

1. onprocessfile 回调：每个文件处理完成（无论成功/失败）都会触发，在这里跟踪单个文件的错误状态，同时累加处理计数。
2. 总文件数与处理计数：通过onaddfile获取上传池中的总文件数，每次onprocessfile触发时增加处理计数，当两者相等时，说明所有文件都处理完毕。
3. UI清理：调用FilePond实例的getFiles()获取所有文件，过滤出无错误的成功文件，再用removeFile()逐个移除，最终UI只保留错误文件。

备选方案：监听文件列表更新 #

也可以用onupdatefiles回调，它会在文件列表发生变化时触发，通过判断文件状态确定是否全处理完成：

const handleFileListUpdate = (files) => {
  // FilePond中，status=5表示处理成功，status=6表示处理失败
  const allProcessed = files.every(file => file.status === 5 || file.status === 6);
  
  if (allProcessed) {
    const errors = files.filter(f => f.status === 6);
    console.log('错误文件：', errors);
    
    // 移除成功文件
    const successFiles = files.filter(f => f.status === 5);
    successFiles.forEach(file => pondRef.current.removeFile(file));
  }
};

在FilePond组件中添加：

<FilePond
  // ...其他配置
  onupdatefiles={handleFileListUpdate}
/>

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