React Native使用apollo-upload-client上传图片报Upload value invalid错误如何解决

该错误核心有两个常见诱因：

1. 客户端Apollo Client未配置支持Upload类型的上传链路，无法将ReactNativeFile实例转换为符合GraphQL multipart请求规范的表单格式
2. 服务端Apollo Server未正确启用graphql-upload处理逻辑，无法解析上传的文件请求

一、客户端配置（必改） #

1. 首先安装上传链路依赖：

npm install apollo-upload-client

2. 替换Apollo Client默认的HTTP链路为上传链路：

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

// 替换原有createHttpLink为createUploadLink
const uploadLink = createUploadLink({
  uri: '你的Apollo Server接口地址',
});

// 原有鉴权逻辑无需改动
const authLink = setContext((_, { headers }) => {
  const token = '你的用户鉴权token';
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : '',
    }
  }
});

const client = new ApolloClient({
  link: authLink.concat(uploadLink),
  cache: new InMemoryCache(),
});

3. 确认ReactNativeFile导入路径正确，同时优化文件名格式：

// 导入路径必须正确
import { ReactNativeFile } from 'apollo-upload-client';

// 文件名增加后缀，避免服务端识别格式异常
const avatarPhotoAsReactNativeFile = new ReactNativeFile({
  uri: avatarPhoto.path,
  name: `${avatarPhoto.modificationDate}.jpg`,
  type: "image/jpeg",
});

原有Mutation调用逻辑无需改动。

二、服务端配置（必改） #

Apollo Server 3及以上版本已移除内置文件上传支持，需手动配置graphql-upload：

1. 安装服务端依赖：

npm install graphql-upload

2. 完整配置示例（以Express集成为例）：

import { ApolloServer } from '@apollo/server';
import { expressMiddleware } from '@apollo/server/express4';
import express from 'express';
import { graphqlUploadExpress, GraphQLUpload } from 'graphql-upload';

const app = express();

// 必须手动在Schema中声明Upload标量
const typeDefs = `#graphql
  scalar Upload

  type Mutation {
    userUploadAvatar(photo: Upload!): String!
  }
`;

const resolvers = {
  // 注册Upload标量解析器
  Upload: GraphQLUpload,
  Mutation: {
    userUploadAvatar: async (_, { photo }) => {
      // 此处拿到的photo完全符合你预期的FileUpload接口结构
      const { filename, mimetype, encoding, createReadStream } = await photo;
      // 后续可自行处理文件流，存储到本地或云存储
      return '上传成功';
    }
  }
};

const server = new ApolloServer({ typeDefs, resolvers });

// 启动服务时必须先加载上传中间件，再加载Apollo中间件
(async () => {
  await server.start();
  app.use(
    '/graphql',
    // 可按需调整单文件大小限制、最多上传文件数
    graphqlUploadExpress({ maxFileSize: 10 * 1024 * 1024, maxFiles: 1 }),
    express.json(),
    expressMiddleware(server)
  );
  app.listen(4000, () => console.log('服务已启动在4000端口'));
})();

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