类型为Record<string, File>时传参报错？文件上传400错误排查

问题背景 #

调用FileService.uploadFile接口时，传入手动构造的File对象始终返回400错误，但传空对象{}时请求正常，Postman测试接口也能正常运行。接口要求documents参数为Record<string, File>类型，相关代码定义如下：

export class FileService {
  async uploadFile(
    fileId: string,
    {
      documents,
      checkbox,
    }: { documents?: Record<string, File>; checkbox?: boolean }
  ): Promise<FileEntry> {
    const form = new FormData();

    Object.entries(documents || {}).forEach(([k, file]) =>
      form.append(k, file, file.name)
    );
    return ...
  }
}

报错原因 #

你手动构造File对象的方式完全错误：不能通过字面量File{...}创建实例，这不是合法的File对象生成方式。真实的File实例必须通过File构造函数创建，且必须包含核心的文件二进制内容（Blob部分）。你只定义了name、lastModified、size这些元数据，缺少文件内容，导致FormData无法正确序列化，接口校验不通过返回400。

正确传参方式 #

方式1：使用input文件选择器获取的真实File对象 #

这是最可靠的方式，直接传入通过input元素获取的原生File对象即可：

// 假设通过input选择器拿到了真实的File实例
const driverLicenseFile = ...; // 从inputRef.current.files[0]获取的File对象
const signatureFile = ...;

FileService.uploadFile('testing', {
  documents: {
    "driverLicense": driverLicenseFile,
    "signature": signatureFile
  },
  checkbox: true,
});

方式2：手动构造合法的File实例 #

如果需要模拟测试，必须严格使用File构造函数创建，传入文件内容、文件名，可选指定元数据：

// 构造含空内容的测试文件（若需要真实内容可传入Blob/ArrayBuffer）
const driverLicense = new File([], 'testing.jpg', {
  lastModified: 1234331,
  type: 'image/jpeg' // 建议指定MIME类型，与文件名后缀匹配
});

const signature = new File([], 'testing.jpg', {
  lastModified: 1234331,
  type: 'image/jpeg'
});

FileService.uploadFile('testing', {
  documents: {
    "driverLicense": driverLicense,
    "signature": signature
  },
  checkbox: true,
});

补充说明 #

• 构造File时，第一个参数是文件内容（支持ArrayBuffer、Blob、字符串等），即使是空内容也要传空数组，不能省略
• 建议指定type（MIME类型），确保和文件名后缀匹配，避免接口校验失败
• Postman能正常请求是因为它会自动处理文件的二进制内容，生成合法的File/Blob实例

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