变量“$file”的值无效 ;上传值无效

Posted 2023-03-08

【中文标题】变量“$file”的值无效 ;上传值无效

【英文标题】：Variable "$file" got invalid value ; Upload value invalid变量“$file”的值无效 ;上传值无效

【发布时间】：2021-02-15 20:44:05

【问题描述】：

我正在使用来自 graphql-request 的 GraphQLClient 向我的服务器发送请求。我正在尝试通过执行以下操作上传文件：

const graphQLClient = new GraphQLClient('http://localhost:4000/graphql', 
    credentials: 'include',
    mode: 'cors',
);
const source = gql`
    mutation uploadImage($file: Upload!) 
        uploadImage(file: $file)
    
`;
const file: RcFile = SOME_FILE; // RcFile (from antd) extends File
await graphQLClient.request<uploadImage: boolean>(source,  file );

但是，当我以这种方式向服务器发送请求时，会出现以下错误：

GraphQLError: Variable \"$file\" got invalid value ; Upload value invalid

这是我的请求在控制台中的样子：

operations: 
    "query":"\n mutation uploadProfileImage($file: Upload!)\n uploadProfileImage(file: $file)\n \n",  
    "variables":"file":null

map: "1":["variables.file"]
1: (binary)

还有其他人遇到过这个问题吗？我似乎无法将文件上传到我的后端。

【问题讨论】：

console.log(file) ?

File uid: "rc-upload-1604388578610-2", name: "images.jpg", lastModified: 1604388587004, lastModifiedDate: Tue Nov 03 2020 01:29:47 GMT-0600 (Central Standard Time), webkitRelativePath: "", name: "images.jpg" size: 4040 type: "image/jpeg" uid: "rc-upload-1604388578610-2" webkitRelativePath: ""

此服务器是否支持正确上传graphql？ ... 突变应该定义返回类型/字段

我在后端使用 typegraphql 和 graphql-upload：@Mutation(() => Boolean) async uploadImage( @Arg('file', () => GraphQLUpload) upload: UploadType): Promise<boolean> ...

更像......它使用邮递员工作吗？

【参考方案1】：

我通过在 ApolloServer 配置中将上传选项设置为 false 解决了这个问题。

new ApolloServer( schema, context, uploads: false )

然后使用来自graphql-upload 的graphqlUploadExpress() 中间件。

app.use(graphqlUploadExpress( maxFileSize: 10000, maxFiles: 10 ));

希望这可以帮助遇到我遇到同样问题的任何人?

【讨论】：

我正在尝试同样的事情，但收到错误消息：“POST body 丢失。你忘记使用 body-parser 中间件了吗？”。你遇到过吗？

【参考方案2】：

这取决于你使用的 ApolloClient。

1- 如果使用 import ApolloClient from 'apollo-client' 必须使用“createUploadLink”而不是“createHttpLink”的意思，

import  createUploadLink  from 'apollo-upload-client'
const httpLink = createUploadLink(
  uri: httpEndpoint,
)

2- 如果使用 createApolloClient，请确定这个包：

import  createApolloClient, restartWebsockets  from 'vue-cli-plugin-apollo/graphql-client'
const  apolloClient, wsClient  = createApolloClient(
    ...defaultOptions,
    ...options,
  )
``
You do not need to set anything and Upload work complete.

【参考方案3】：

除了接受的答案中描述的ApolloServer 实现（并澄清@Masoud 的答案）之外，请确保您还有以下使用apollo-upload-client 的客户端实现：

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

const client = new ApolloClient(
  cache: new InMemoryCache(),
  link: createUploadLink(
      uri: 'http://localhost:4000/graphql'
  ),
);