React Native Image Picker上传至Node.js后端的类型错误修复

问题原因 #

TypeScript标准库中FormData.append()方法的参数类型仅接受string | Blob，但React Native的FormData实现做了扩展，允许传入包含uri、type、name（可选size）的对象来实现本地文件上传——这就是你代码能正常工作但TypeScript报错的核心原因。

解决方案 #

方案1：全局扩展FormData类型（推荐） #

创建一个类型声明文件（比如src/types/react-native-formdata.d.ts），覆盖默认的FormData类型定义，让它兼容React Native的文件对象：

declare global {
  interface FormData {
    append(
      name: string,
      value: string | Blob | {
        uri: string;
        type: string;
        name: string;
        size?: number;
      },
      fileName?: string
    ): void;
  }
}

export {};

然后确保你的tsconfig.json中include数组包含这个文件，比如：

{
  "include": [
    "src/**/*",
    "src/types/**/*.d.ts"
  ]
}

这样TypeScript就能识别RN风格的FormData参数，不会再报错。

方案2：局部类型断言 #

如果不想修改全局类型，可以在调用append时用类型断言临时绕过检查：

// 快速解决方式
formData.append('postImage', imageFile as any);

// 更严谨的方式
type RNUploadFile = {
  uri: string;
  type: string;
  name: string;
  size?: number;
};
formData.append('postImage', imageFile as unknown as Blob);

这种方式适合临时场景，长期维护还是全局类型扩展更优雅。

方案3：使用React Native内置的FormData类型 #

确保你导入的是React Native提供的FormData而非全局的：

import { FormData } from 'react-native';

// 创建实例并添加文件
const formData = new FormData();
formData.append('postImage', {
  uri: imageUri,
  type: 'image/jpeg',
  name: 'post-image.jpg',
  size: imageSize
});

部分情况下，RN的内置类型已经包含对这种文件对象的支持，导入后即可消除错误。

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