React+Ant Design通过GraphQL向Node.js服务器传图失败求助

服务器报错Cannot read properties of undefined (reading 'filename')的核心原因是：Ant Design Upload组件返回的是封装后的自定义文件对象，并非GraphQL Upload规范要求的原生File对象或符合Multipart Request格式的上传结构，导致服务器无法识别文件属性。

1. 提取原生File对象 #

AntD Upload的文件对象中，originFileObj属性才是浏览器原生的File对象，需要提取这个对象用于GraphQL请求：

// 状态改为保存原生File对象，而非AntD封装的UploadFile
const [selectedFile, setSelectedFile] = useState<File | null>(null);

<Form.Item name="files" label="Image">
  <Upload 
    accept="image/png, image/jpeg" 
    maxCount={1}
    beforeUpload={(file) => {
      // 直接保存原生File对象
      setSelectedFile(file.originFileObj);
      return false; // 阻止组件自动上传
    }}
    showUploadList={false}
    listType="picture-card"
  >
    <div>
      <PlusOutlined />
      <div style={{ marginTop: 8 }}>Upload image</div>
      {selectedFile?.name}
    </div>
  </Upload>
</Form.Item>

2. 配置GraphQL客户端支持文件上传 #

如果使用Apollo Client，必须替换默认的HttpLink为createUploadLink（来自apollo-upload-client），以处理multipart/form-data格式的文件上传请求：

# 安装依赖
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服务器地址', // 替换为实际接口地址
  }),
  cache: new InMemoryCache(),
});

3. 修正Mutation调用参数 #

提交请求时，传递提取到的原生File对象：

const [mutation, { loading }] = useMutation<Response, Request>(CREATE_OPERATOR);

const handleSubmit = async () => {
  if (!selectedFile) return;
  const result = await mutation({ 
    variables: { 
      request, 
      file: selectedFile 
    } 
  });
};

• 服务器端已通过Postman验证正常，无需修改，但需确保使用了graphql-upload等支持文件上传的GraphQL工具包。
• 移除不必要的customRequest逻辑，避免干扰文件状态管理。

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