React前端通过HotChocolate GraphQL无法向ASP.NET Core后端上传文件

环境信息 #

• 前端：React，依赖@apollo/client: "3.6.9"
• 后端：ASP.NET Core，依赖HotChocolate.AspNetCore v12.12.0

核心问题分析 #

从你提供的代码看，前端input[type="file"]的onChange事件处理写法完全错误，导致没有正确获取到用户选择的文件对象，这是后端接收空文件的直接原因。另外，Apollo Client 3.x版本处理GraphQL文件上传需要额外配置支持multipart请求。

具体修复步骤 #

1. 修正文件选择的事件处理 #

你的input onChange写法不符合React事件规范，正确的写法应该接收事件对象，从event.target.files中获取选中的文件：

return (
    <div className="h-[130px] mb-4">
      <div className="mb-2 px-2">
        <input
          type="file"
          required
          onChange={(event) => {
            // 获取选中的第一个文件
            const file = event.target.files?.[0];
            if (file && event.target.validity.valid) {
              uploadDocuments({ bookingId: 3183, file });
            }
          }}
        />
      </div>
    </div>
);

2. 配置Apollo Client支持文件上传 #

Apollo Client 3.x需要使用createUploadLink替代默认的createHttpLink来处理multipart/form-data类型的文件上传请求。如果你的Apollo Client还没配置，需要修改客户端初始化代码：

首先安装依赖（如果未安装）：

npm install apollo-upload-client

然后修改Apollo Client配置：

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

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

3. 确认GraphQL Mutation定义 #

确保useUploadDocumentsMutation对应的GraphQL mutation定义正确，文件参数需标记为Upload类型：

mutation UploadDocuments($bookingId: Long!, $file: Upload!) {
  uploadBlobFiles(bookingId: $bookingId, file: $file)
}

4. 增强后端日志排查 #

可以在后端方法中添加日志，确认文件接收状态：

public async Task<bool> UploadBlobFiles(long bookingId, IFile file)
{
    if (file == null)
    {
        Console.WriteLine("后端接收文件为空");
        return false;
    }
    await using var stream = file.OpenReadStream();
    Console.WriteLine($"接收文件大小：{stream.Length}字节");
    return true;
}

验证步骤 #

完成修改后重新测试：

1. 选择文件后，控制台console.log('~~~input', input)应打印出完整的File对象
2. 检查浏览器请求的FormData中是否包含文件内容
3. 查看后端日志确认文件是否正常接收

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