Angular/Apollo GraphQL文件上传Mutation失败：服务器接收空字典

核心原因 #

Apollo Angular客户端默认不支持GraphQL的Upload类型变量，不会自动将请求转换为multipart/form-data格式，导致服务端无法解析文件数据，最终收到空字典。

解决方案步骤 #

1. 安装apollo-upload-client依赖 #

该包专门用于处理GraphQL文件上传的multipart请求格式：

npm install apollo-upload-client

2. 重新配置Apollo客户端的HTTP链接 #

替换默认的HttpLink为createUploadLink，确保请求能正确处理文件变量：

在Apollo配置模块（如apollo.module.ts）中修改配置：

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

@NgModule({
  exports: [ApolloModule],
  providers: [
    {
      provide: APOLLO_OPTIONS,
      useFactory: () => {
        const link = createUploadLink({
          uri: '/graphql', // 你的GraphQL端点地址
          headers: {
            // 保留原有认证头，比如Authorization
          }
        });

        return {
          link,
          cache: new InMemoryCache(),
        };
      },
    },
  ],
})
export class ApolloConfigModule {}

3. 验证服务端graphene-file-upload中间件配置 #

确保Django项目已正确添加相关中间件，在settings.py中：

MIDDLEWARE = [
    # ... 其他已配置中间件
    'graphene_file_upload.django.MutationUploadMiddleware',
]

同时确认Graphene Schema中上传mutation的参数类型为Upload：

from graphene import Mutation, Boolean, Upload
from graphene_django import DjangoObjectType

class UploadNewFile(Mutation):
    success = Boolean()

    class Arguments:
        file = Upload(required=True)

    def mutate(self, info, file):
        # 文件处理逻辑，比如存储到本地或云服务
        print(file) # 现在应能获取到有效文件对象
        return UploadNewFile(success=True)

class Mutation(ObjectType):
    upload_new_file = UploadNewFile.Field()

4. 客户端调用代码无需修改 #

你现有组件和服务中传递File对象的代码已经正确，保持原逻辑即可。

验证 #

重启Angular项目和Django服务后，触发文件上传，服务端应能正常接收文件对象，不再返回空字典。

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