FilePond 文件上传组件中 FormData 重复字段问题解析

问题现象

在使用 FilePond 文件上传组件时，开发者发现提交的 FormData 数据中包含了两个同名字段：一个为空对象，另一个为二进制文件对象。这导致后端无法正确获取 File 对象，影响了文件上传功能的正常使用。

问题本质

FilePond 默认的上传行为会同时提交两种数据格式：

1. 一个包含文件元信息的 JSON 字符串
2. 实际的二进制文件对象

这种设计是为了满足不同场景下的需求，让后端可以灵活选择处理方式。但在某些情况下，特别是当后端接口设计为只接收纯文件数据时，这种默认行为就会造成干扰。

解决方案

开发者可以通过自定义 process 函数来完全控制上传行为。以下是一个推荐的自定义上传实现方案：

server: {
  process: (fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
    const formData = new FormData();
    formData.append(fieldName, file);  // 只添加文件对象
    
    const request = new XMLHttpRequest();
    request.open('POST', '/api/upload');
    
    // 上传进度处理
    request.upload.onprogress = (e) => {
      progress(e.lengthComputable, e.loaded, e.total);
    };
    
    // 响应处理
    request.onload = function() {
      if (request.status >= 200 && request.status < 300) {
        load(request.responseText);
      } else {
        error('上传失败');
      }
    };
    
    request.send(formData);
    
    return {
      abort: () => {
        request.abort();
        abort();
      }
    };
  }
}

技术要点

1. FormData 使用：直接创建新的 FormData 对象并只添加文件数据，避免默认的元信息数据。

2. XMLHttpRequest 控制：相比 fetch API，XMLHttpRequest 提供了更细粒度的上传控制，特别是进度事件。

3. 状态管理：正确处理上传成功和失败的情况，调用 FilePond 提供的回调函数。

4. 取消支持：实现 abort 方法，确保上传过程可以被用户取消。

最佳实践建议

1. 对于简单上传需求，可以直接使用 FilePond 的默认行为，后端需要同时处理 JSON 元数据和文件数据。

2. 对于需要精确控制的场景，推荐使用自定义 process 函数，这样可以完全控制请求内容和格式。

3. 在生产环境中，建议添加额外的错误处理和重试机制，提升用户体验。

4. 考虑添加文件校验逻辑，如大小、类型检查等，可以在客户端提前拦截不符合要求的文件。

通过理解 FilePond 的上传机制和灵活使用其 API，开发者可以构建出既强大又灵活的文件上传功能，满足各种业务场景需求。