在使用Apollo Server和Express框架时,如果遇到“Apollo-Server-Express没有接收到上传对象”的错误,通常是由于缺少正确的配置或中间件导致的。以下是一些可能的解决方法。
确保安装了必要的依赖项:
在创建Apollo Server实例之前,确保正确配置Express应用程序以支持文件上传。为此,需要使用body-parser
和graphql-upload
中间件。
// 导入所需的依赖项
const express = require('express');
const { ApolloServer } = require('apollo-server-express');
const { graphqlUploadExpress } = require('graphql-upload');
const bodyParser = require('body-parser');
// 创建Express应用程序
const app = express();
// 添加body-parser中间件
app.use(bodyParser.json());
// 添加graphql-upload中间件
app.use(graphqlUploadExpress({ maxFileSize: 10000000, maxFiles: 10 }));
// 创建Apollo Server实例
const server = new ApolloServer({ /* ... */ });
// 将Apollo Server应用程序作为中间件添加到Express应用程序
server.applyMiddleware({ app });
// 启动服务器
app.listen({ port: 4000 }, () =>
console.log(`Server ready at http://localhost:4000${server.graphqlPath}`)
);
这个示例中,body-parser
用于解析请求体,而graphql-upload
中间件允许Express解析上传的文件。
确保在GraphQL模式中定义了合适的类型来处理文件上传。可以使用GraphQLUpload
标量类型进行文件上传。例如:
const { gql } = require('apollo-server-express');
const { GraphQLUpload } = require('graphql-upload');
const typeDefs = gql`
scalar Upload
type Mutation {
uploadFile(file: Upload!): String!
}
`;
const resolvers = {
Mutation: {
uploadFile: async (_, { file }) => {
// 处理上传的文件
// 返回文件的URL或其他信息
},
},
};
在这个示例中,我们定义了一个Upload
标量类型,它将被用于处理文件上传。在Mutation中,我们接收一个名为file
的参数,并在解析器中处理上传的文件。
在客户端发起GraphQL请求时,确保使用正确的请求格式来上传文件。
对于普通的HTTP POST请求,可以使用FormData
来创建请求体,并将文件添加到该表单数据中。例如:
const formData = new FormData();
formData.append('operations', JSON.stringify({
query: `
mutation ($file: Upload!) {
uploadFile(file: $file)
}
`,
variables: {
file: null, // 文件将在这里添加
},
}));
formData.append('map', JSON.stringify({
'0': ['variables.file'],
}));
formData.append('0', file, file.name);
fetch('/graphql', {
method: 'POST',
body: formData,
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
在这个示例中,我们使用FormData
来创建请求体,并将文件添加到表单数据中。然后,我们将数据作为HTTP POST请求发送到/graphql
端点。
对于Apollo Client,可以使用apollo-upload-client
库来方便地上传文件。首先,确保安装了apollo-upload-client
库。然后,在Apollo Client中使用createUploadLink
来创建Apollo链接,并将其作为ApolloClient
的链接。例如:
import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client';
import { createUploadLink } from 'apollo-upload-client';
const link = createUploadLink({
uri: '/graphql',
});
const client = new ApolloClient({
link: link,
cache: new InMemoryCache(),
});