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