ReactNative TypeScript中Axios传递FormData文件数据报错解决方案

在React Native的TypeScript项目中，直接给FormData.append传入带uri/name/type的对象会触发编译错误——这是因为TypeScript全局定义的FormData类型只接受Blob/File/string类型的参数，但React Native的文件上传逻辑支持这种自定义对象格式。以下是不使用any的修复方案：

1. 定义React Native文件类型 #

先声明一个符合RN上传需求的文件类型：

type RNFile = {
  uri: string;
  name: string;
  type: string;
};

2. 扩展FormData的类型声明 #

创建一个.d.ts类型声明文件（比如src/types/formdata.d.ts），扩展全局FormData的append方法，让它支持我们定义的RNFile类型：

declare global {
  interface FormData {
    append(name: string, value: string | Blob | File | RNFile, fileName?: string): void;
  }
}

export {}; // 确保文件被当作模块处理

3. 正常使用FormData上传 #

现在就可以直接传入自定义文件对象，无需any转换：

const formData = new FormData();
formData.append('image_file', {
  uri: form.image_file.path,
  name: form.image_file.filename,
  type: form.image_file.mime
});

// 后续用Axios发送请求
axios.post('/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data',
  },
});

这样既保留了TypeScript的类型检查能力，又完美适配了React Native的文件上传逻辑。

内容的提问来源于stack exchange，提问作者Wai Yan Hein