GraphQL 是一种用于 API 的查询语言,它提供了一种更加灵活、高效、强大的数据查询和操作方式。在 GraphQL 中,我们可以轻松地定义数据模型和查询操作,但是,官方并没有提供文件上传的解决方案。本文将介绍如何在 GraphQL 中添加文件上传功能,并提供示例代码以供学习和参考。
为什么需要文件上传?
在实际的开发中,文件上传是一个不可避免的需求。比如在社交应用中,用户可以上传头像或者图片;在电商应用中,用户可以上传商品图片或者评价图片。如果没有文件上传功能,我们很难实现这些功能。
如何在 GraphQL 中添加文件上传?
在 GraphQL 中添加文件上传功能需要借助外部库,我们可以使用 multer 或者 apollo-upload-server 这些库来实现文件上传。这里我们选择 apollo-upload-server 来添加文件上传功能。
1. 安装 apollo-upload-server
npm install apollo-upload-server --save
2. 添加文件上传中间件
我们需要在 GraphQL Server 中添加文件上传中间件,这里我们使用 Express.js 作为 GraphQL Server。需要注意的是,添加文件上传中间件需要在 GraphQL Server 的路由之前。
-- -------------------- ---- ------- ----- - ------------ - - --------------------------------- ----- - -------------------- - - -------------------------------- ----- ------- - ------------------- ----- --- - ---------- -- --------- ------------------------------ ------------ --------- --------- -- ---- -- -- ------------ ----- ------ - --- -------------- --------- --------- --- -- - ------------ - ---------- -- ------------------------ --- --- -- ----- ------------ ----- ---- -- -- -- --------------- ------ ----- -- -------------------------------------------- --
在上述代码中,我们使用 graphqlUploadExpress
函数添加文件上传中间件,并设置了文件大小限制和上传文件数量限制。
3. 在 GraphQL Schema 中定义文件上传类型
在 GraphQL 中,默认情况下,输入参数只支持标量类型和自定义类型,不支持文件类型。因此,我们需要定义一个新的 Upload
类型。
scalar Upload
这样,在我们的 GraphQL Schema 中,就可以支持文件上传了。
4. 在 GraphQL Resolvers 中添加文件上传解析器
在 GraphQL Resolvers 中,我们需要添加文件上传的解析器。这样,当客户端发起一个文件上传请求时,服务器就可以接收到请求,并通过解析器来处理这个上传请求。
-- -------------------- ---- ------- ----- - ----------------- - - -------------- ----- ---- - ---------------- ----- --------- - - ------ - --- -- --------- - ----------- ----- --- - ---- -- -- - ----- - ----------------- -------- - - ----- ----- ----- ------ - ------------------- ----- -------- - -------------------- ---------- ---------- ----- ----------- - ---------------------------- ----- ------------------------- ------ - -------- ----- -------- ----- -------- ------------- -- - - --
在上述代码中,我们定义了一个 uploadFile
Mutation,它的输入参数有一个 file
,这个 file
参数的类型是 Upload
。当客户端发起这个 Mutation 请求时,服务器就会接收到请求,并在解析 file
参数时,自动解析出文件流和文件名。我们只需要将文件流写入到指定的文件路径中即可。
示例代码
下面是一个完整的示例代码,供读者参考和学习。
-- -------------------- ---- ------- ----- -- - -------------- ----- ---- - ---------------- ----- ------- - ------------------- ----- - ------------- --- - - --------------------------------- ----- - -------------------- - - -------------------------------- ----- --- - ---------- -- --------- ------------------------------ ------------ --------- --------- -- ---- -- -- ------- ------ ----- -------- - ---- ------ ------ ---- ---- - -------- -------- -------- ------- - ---- ----- - ------ ------ - ---- -------- - ---------------- --------- ----- - -- -- ----- ----- --------- - - ------ - ------ -- -- ------ ------- -- --------- - ----------- ----- --- - ---- -- -- - ----- - ----------------- -------- - - ----- ----- ----- ------ - ------------------- ----- -------- - -------------------- ---------- ---------- ----- ----------- - ------------------------------- ----- ------------------------- ------ - -------- ----- -------- ----- -------- ------------- -- - - -- -- -- ------------ ----- ------ - --- -------------- --------- --------- --- -- - ------------ - ---------- -- ------------------------ --- --- -- ----- ------------ ----- ---- -- -- -- --------------- ------ ----- -- -------------------------------------------- --
可以使用以下命令启动服务器:
npm start
总结
本文介绍了如何在 GraphQL 中添加文件上传功能。通过安装 apollo-upload-server 库、添加文件上传中间件、在 GraphQL Schema 中定义 Upload 类型以及在 GraphQL Resolvers 中添加文件上传解析器等步骤,我们可以轻松地实现文件上传功能。这个技术对于开发社交应用、电商应用等涉及图片、视频等的应用非常有用。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6450c408980a9b385b9af644