TypeScript文件上传自定义类型后向FormData追加文件报错如何解决

问题根因 #

FormData.append() 接收文件类型参数时，要求传入的值必须是原生 File 或 Blob 接口的实例。你自定义的 FileProps 哪怕属性和原生File完全重叠，也只是自定义的结构类型，没有被TS识别为原生File的子类型，因此触发类型报错。另外你自定义的FileProps里部分属性的类型定义和原生File不符：

• slice 方法返回值应为Blob而非void
• stream 方法返回值应为ReadableStream<Uint8Array>而非void
• text 方法返回值应为Promise<string>而非void
• arrayBuffer 应为返回Promise<ArrayBuffer>的方法而非直接ArrayBuffer类型

最优解决方案 #

直接复用原生File类型，扩展你需要的自定义属性即可，不用从零定义所有属性：

// 直接在原生File基础上扩展你需要的额外字段，比如path
export type FileProps = File & {
  path: string
}

// useState 用法不变
const [files, setFiles] = useState<FileProps[]>([])

修改后原生File的所有类型定义都会被保留，传入FormData.append()时不会再触发类型错误。

临时绕过方案 #

如果你确实需要保留现有自定义类型的结构，可以用类型断言绕开检查，注意该方案仅适合你确定自己的file对象完全符合原生File运行时要求的场景：

for (const file of files) {
  formData.append('files', file as unknown as File)
}

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