Vue3+GraphQL+Lighthouse文件上传失败求助

问题根源 #

你的核心问题是前端没有按GraphQL多部分请求规范发送文件，而是把浏览器伪造的本地文件路径字符串传给了后端，导致Lighthouse无法识别Upload类型。下面是具体解决步骤：

1. 安装必要依赖 #

确保项目安装支持文件上传的Apollo链接包：

npm install @apollo/client graphql graphql-upload
# 或使用yarn
yarn add @apollo/client graphql graphql-upload

2. 配置Apollo客户端支持多部分请求 #

修改Apollo客户端初始化代码，用createUploadLink替换默认的createHttpLink，让客户端自动处理文件上传的multipart请求格式：

// src/apollo/client.js 或你的客户端配置文件
import { ApolloClient, InMemoryCache } from '@apollo/client';
import { createUploadLink } from 'apollo-upload-client';

const client = new ApolloClient({
  link: createUploadLink({
    uri: '你的GraphQL后端地址', // 比如 '/graphql' 或完整URL
    credentials: 'include', // 若需携带cookie可保留，否则移除
  }),
  cache: new InMemoryCache(),
});

export default client;

3. 前端表单正确处理文件 #

在Vue组件中，不要直接取input的value（那是浏览器伪造的路径），而是通过event.target.files[0]获取真实的File对象：

<template>
  <form @submit.prevent="handleSubmit">
    <input type="file" ref="avatarInput" accept="image/*" />
    <button type="submit">上传头像</button>
  </form>
</template>

<script setup>
import { ref } from 'vue';
import { useMutation } from '@apollo/client';
import gql from 'graphql-tag';

const avatarInput = ref(null);

// 定义上传mutation
const UPLOAD_AVATAR = gql`
  mutation UploadAvatar($avatar: Upload!) {
    uploadAvatar(avatar: $avatar) {
      id
      avatarUrl
    }
  }
`;

const [uploadAvatar] = useMutation(UPLOAD_AVATAR);

const handleSubmit = async () => {
  const file = avatarInput.value.files[0];
  if (!file) return;

  try {
    const { data } = await uploadAvatar({
      variables: {
        avatar: file, // 直接传递File对象，而非路径字符串
      },
    });
    console.log('上传成功', data);
  } catch (error) {
    console.error('上传失败', error);
  }
};
</script>

4. 后端配置二次确认 #

虽然你已按Lighthouse文档配置，仍可快速核对：

• Schema中已正确声明scalar Upload
• Mutation参数里的avatar类型为Upload!
• 后端处理类正确使用Lighthouse的文件上传逻辑（比如@Upload装饰器或对应数据类型）

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