React Native用ReactNativeFile上传图片至NestJS GraphQL报错排查

错误核心原因 #

问题本质是GraphQL客户端未配置文件上传支持，导致ReactNativeFile实例没有被正确解析为后端graphql-upload期望的FileUpload格式；同时前端字段名与后端要求存在差异（前端name/type vs 后端filename/mimetype）。

分步解决方案 #

1. 配置GraphQL客户端支持文件上传 #

若使用Apollo Client，必须替换默认HTTP链接为支持multipart/form-data的上传链接：

• 安装依赖：

npm install apollo-upload-client
# 或 yarn add apollo-upload-client

• 修改客户端初始化代码：

import { ApolloClient, InMemoryCache } from '@apollo/client';
import { createUploadLink } from 'apollo-upload-client';

const client = new ApolloClient({
  link: createUploadLink({
    uri: '你的GraphQL接口地址', // 替换为实际接口URL
  }),
  cache: new InMemoryCache(),
});

该链接会自动处理ReactNativeFile到后端FileUpload的格式转换，包括生成后端需要的createReadStream方法。

2. 对齐前端文件字段名 #

调整generateRNFile函数的字段名，与后端期望的结构统一：

function generateRNFile(uri, name) {
  return uri ? new ReactNativeFile({
    uri,
    mimetype: mime.lookup(uri) || 'image/jpeg', // 对应后端mimetype字段
    filename: name, // 对应后端filename字段
  }) : null;
}

注：apollo-upload-client的ReactNativeFile也兼容type/name字段，但统一为后端字段名能避免潜在映射问题。

3. 确认后端中间件配置（可选） #

虽然你用Playground测试正常，可再次确认后端是否正确挂载graphql-upload中间件（以Express为例）：

import { graphqlUploadExpress } from 'graphql-upload';

// 在GraphQL接口路由前挂载
app.use(graphqlUploadExpress({ maxFileSize: 10 * 1024 * 1024, maxFiles: 10 }));

验证 #

完成配置后重新调用onUploadPress，前端的ReactNativeFile会被客户端正确转换为后端需要的FileUpload结构（包含createReadStream等方法），即可解决「Upload value invalid」错误。

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