Nuxt + GraphQL(Apollo)文件上传：@nuxt/apollo模块是否支持上传功能

核心结论 #

@nuxt/apollo 模块默认不内置文件上传支持，其默认配置采用标准HttpLink，仅支持JSON格式的GraphQL请求，无法处理文件上传所需的multipart/form-data类型请求，必须替换链路才能实现文件上传需求。

具体实现步骤 #

你需要改用apollo-upload-client提供的上传链路，操作流程如下：

• 安装依赖
  执行安装命令：npm install apollo-upload-client，可根据你的包管理工具替换为yarn/pnpm对应的安装指令。
• 修改Nuxt配置
  覆盖默认的HttpLink配置，示例nuxt.config.js配置如下：

  import { createUploadLink } from 'apollo-upload-client'
  
  export default {
    // 其他现有配置
    apollo: {
      clientConfigs: {
        default: {
          // 直接指定自定义链路，替换默认HttpLink
          link: createUploadLink({
            uri: '你的GraphQL服务端接口地址',
            credentials: 'include', // 按需配置跨域携带cookie等参数
            headers: {
              // 按需配置自定义请求头
            }
          })
        }
      }
    }
  }
  

• 注意事项
  替换链路后无需手动封装FormData，apollo-upload-client会自动识别请求参数中的File/Blob类型，自动转换为符合GraphQL上传规范的multipart请求。同时需要确保你的GraphQL服务端已经适配了multipart/form-data的文件上传解析规则。

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