FilePond如何防止重复文件上传 上传前校验及替代方案

removefile事件回调返回null的原因很明确：该事件的回调参数顺序和addfile一致，第一个参数是错误对象，第二个才是文件实例，只定义一个形参时，接收到的是无错误场景下返回的null，自然拿不到目标文件对象。

你需要的上传前拦截重复文件的需求，直接用FilePond内置的beforeAddFile钩子就能实现，这个钩子会在文件正式加入上传队列、触发上传流程之前执行，返回false就可以直接拦截对应文件，不需要额外引入第三方扩展。
完整实现代码如下：

// 初始化FilePond实例
const pond = FilePond.create(document.querySelector('input.filepond'), {
  // 队列加入前的校验钩子
  beforeAddFile: (newItem) => {
    // 获取当前队列中已存在的所有文件
    const existingList = pond.getFiles();
    // 重复判定规则：对比文件名+文件大小+最后修改时间，误判率极低
    const isDuplicated = existingList.some(item => {
      return item.file.name === newItem.file.name
        && item.file.size === newItem.file.size
        && item.file.lastModified === newItem.file.lastModified
    })

    if (isDuplicated) {
      // 可在此处自定义重复提示，比如弹出全局提醒
      console.warn('请勿重复添加相同文件');
      return false; // 拦截重复文件，不加入队列
    }
    return true; // 非重复文件正常放行
  }
});

// 正确的removefile事件监听写法
pond.on('removefile', (error, removedItem) => {
  if (error) return console.error('文件移除失败', error);
  // 此处可正常获取被移除的文件对象
  console.log('已移除文件：', removedItem);
});

如果后续有替换控件的需求，可以根据项目场景选择以下成熟方案：

• Uppy：功能覆盖全面，自带重复文件检测、断点续传、多来源上传（本地、摄像头、第三方云盘等）能力，适合复杂上传业务场景
• Dropzone：轻量无额外依赖，配置灵活，自定义程度高，基础上传场景下体积优势明显
• Simple Uploader：原生JS实现，无框架绑定，API简洁易上手，适合仅需要基础点击/拖拽上传能力的轻量化项目

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