apollo-upload-client与graphene-django适配问题：如何修复参数获取差异

我之前也碰到过一模一样的问题——apollo-upload-client把GraphQL请求打包进FormData里，但graphene-django默认只盯着query参数或者application/json格式的请求体，完全不处理multipart/form-data。下面给你两个靠谱的解决思路：

方案一：用现成的扩展库（最推荐） #

graphene社区有个专门处理文件上传的库graphene-file-upload，它已经帮我们做好了FormData的解析适配，直接用就行：

1. 先安装库：

pip install graphene-file-upload

2. 替换urls.py里的GraphQL视图
   把原来导入的GraphQLView换成这个库提供的版本，示例代码：

from django.urls import path
from graphene_file_upload.django.views import GraphQLView
from .schema import schema  # 你的schema文件

urlpatterns = [
    # 替换成带文件上传支持的GraphQL视图
    path("graphql/", GraphQLView.as_view(graphiql=True, schema=schema)),
]

这个视图会自动识别apollo-upload-client发送的FormData格式，解析出operations（你的GraphQL查询/突变）和map（文件与操作字段的映射关系），完美适配文件上传场景。

方案二：手动自定义GraphQL视图（适合不想加依赖的情况） #

如果你不想引入第三方库，可以自己重写GraphQL视图的请求解析逻辑，手动处理FormData：

1. 创建自定义视图类

from django.http import HttpRequest
from graphene_django.views import GraphQLView
import json

class UploadEnabledGraphQLView(GraphQLView):
    def parse_body(self, request: HttpRequest):
        # 检查请求是否是multipart/form-data格式（apollo-upload-client用的就是这个）
        content_type = request.content_type
        if content_type and content_type.startswith("multipart/form-data"):
            # 提取FormData里的核心参数
            operations = json.loads(request.POST.get("operations", "{}"))
            file_map = json.loads(request.POST.get("map", "{}"))
            
            # 根据map把文件对象映射到operations对应的字段位置
            for file_key, field_paths in file_map.items():
                uploaded_file = request.FILES.get(file_key)
                for path in field_paths:
                    # 按路径层级找到要替换的字段
                    path_parts = path.split(".")
                    target_obj = operations
                    for part in path_parts[:-1]:
                        target_obj = target_obj[int(part) if part.isdigit() else part]
                    # 把字段值替换为上传的文件对象
                    target_obj[path_parts[-1]] = uploaded_file
            
            return operations
        
        # 非文件上传请求，用默认的解析逻辑
        return super().parse_body(request)

2. 在urls.py里使用这个自定义视图

from django.urls import path
from .views import UploadEnabledGraphQLView  # 导入你刚才写的视图
from .schema import schema

urlpatterns = [
    path("graphql/", UploadEnabledGraphQLView.as_view(graphiql=True, schema=schema)),
]

最后别忘了前端配置 #

确保你的apollo客户端用的是createUploadLink而不是普通的createHttpLink，示例：

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

const client = new ApolloClient({
    link: createUploadLink({
        uri: '/graphql/', // 你的GraphQL端点地址
    }),
    cache: new InMemoryCache(),
});

原理其实很简单：apollo-upload-client为了绕过JSON不能传文件的限制，把GraphQL操作序列化成JSON存在FormData的operations字段，文件单独放在FormData里，再用map字段标记文件对应操作里的哪个字段。而默认的graphene-django视图根本没处理这种格式，所以要么用现成的库搞定，要么自己写解析逻辑~

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