使用apollo-angular做GraphQL上传时file变量显示为空对象原因是什么

API 探路者

2026-9-28

问题原因排查&解决方案

这个现象分两种情况，你可以按顺序排查：

1. 正常现象（绝大多数情况）

你在开发者工具看到variables里file为空对象属于正常展示问题，和你的代码操作无关：

apollo-angular开启useMultipart和hasUpload配置后，会自动遵循GraphQL multipart请求规范，把File对象从variables中提取出来，单独放到multipart/form-data的独立分片里传输，不会走JSON序列化的variables字段
原生File对象本身无法被JSON序列化，直接JSON.stringify(文件实例)返回的就是{}，开发者工具Payload面板展示的是序列化后的variables字段值，所以会显示为空对象
你可以在请求的「网络」面板查看「多部分表单数据」分区，就能看到完整的文件内容，只要后端能正常拿到文件，完全不用处理这个展示问题。

2. 配置错误的排查（如果后端确实拿不到文件）

如果确认后端接收不到文件，排查以下几个配置项：

确认你没有使用默认的HTTP链路，而是安装了apollo-upload-client依赖，并且初始化Apollo客户端时用了上传链路，参考配置：

import { ApolloClient, InMemoryCache } from '@apollo/client/core';
import { createUploadLink } from 'apollo-upload-client';
import { NgModule } from '@angular/core';
import { ApolloModule, APOLLO_OPTIONS } from 'apollo-angular';

@NgModule({
  imports: [ApolloModule],
  providers: [
    {
      provide: APOLLO_OPTIONS,
      useFactory: () => {
        return new ApolloClient({
          link: createUploadLink({
            uri: '你的GraphQL服务地址',
          }),
          cache: new InMemoryCache(),
        });
      },
    },
  ],
})
export class GraphQLModule {}