GraphQL 是一种用于构建 API 的查询语言，它允许客户端明确地指定其需要的数据，从而避免了过度获取数据的问题。GraphQL 也支持上传文件，包括图片上传。在本文中，我们将介绍如何在 GraphQL 中实现图片上传，并提供详细的示例代码和建议。
前置知识
在本文中，我们假设您已经熟悉 GraphQL 和 Node.js，并且您已经安装了以下依赖项：
graphql-yoga（用于构建 GraphQL 服务器）multer（用于处理文件上传）
如果您没有熟悉这些技术的话，请先查看一下对应的介绍和学习资料。
图片上传的实现
要在 GraphQL 中实现图片上传，您需要完成以下步骤：
1. 定义 GraphQL 输入类型
GraphQL 输入类型用于接收来自客户端的数据，在这里我们可以定义一个 Upload 类型，用于接收文件上传的数据：
input Upload {
name: String!
type: String!
size: Int!
path: String!
}这里的 Upload 类型包含了文件的基本信息，例如文件名、文件类型、文件大小和文件路径。
2. 定义 GraphQL 根类型
GraphQL 根类型用于定义可供客户端查询的接口，这里我们可以定义一个 Mutation 类型，用于处理文件上传：
type Mutation {
uploadFile(file: Upload!): Boolean!
}这里的 uploadFile 接口用于接收客户端上传的文件，并将文件保存到服务器。我们可以在这里调用文件上传处理库来处理文件上传。
3. 处理文件上传
我们可以使用 multer 处理文件上传，multer 是一种 Node.js 中用于处理 multipart/form-data 类型数据的库。我们可以使用以下代码处理文件上传：
-- -------------------- ---- -------
----- ------- - -------------------
----- ------ - ------------------
----- --- - ----------
----- ------- - --------------------
------------ ----- ----- --- -- -
-------- ------------
--
--------- ----- ----- --- -- -
-------- --------------------------------------
-
---
----- ------ - -------- ------- ---
------------------- ---------------------- ----- ---- -- -
----- ---- - ---------
-- ------- -
------ ------------------------ ---- ------------
-
-------------- ------------
---
---------------- -- -- -
------------------- ------- -- ---- -------
---在这里，我们使用 multer 的 diskStorage 存储引擎，将文件保存在 uploads/ 目录中。文件名由上传时间戳和文件名组成。
4. 为 GraphQL 接口定义解析函数
在 GraphQL 中，我们需要为每个接口定义解析函数，处理接口请求，并返回对应的数据。在这里，我们按照定义的 Mutation 类型为接口 uploadFile 定义解析函数：
-- -------------------- ---- -------
----- - ------------- - - ------------------------
----- ---- - ----------------
----- -- - --------------
----- ----------- - -- ------- -------- -- -- -
----- --------- - ------------
-- --------------------------- -
------------------------
-
----- -------- - -------------------- ----------
------ --- ----------------- ------- --
------
------------ ------- -- -
-- ------------------ -
-- ------ --- --------- ----
------------------------
-
--------------
--
-------------------------------------
------------ ------- -- --------------
------------- -- -- --------- -------- ---
--
--
----- ------------- - ----- -------- ------- -- -
----- - --------- --------- -------- - - ----- -------
----- - -------- - - ----- ------------- ------- -------- ---
------ - --------- --------- --------- ----- -------- --
--
----- -------- - -
------ ------
---- ---- -
--------- -------
--------- -------
--------- -------
----- -------
-
---- -------- -
---------------- --------- -----
-
--
----- --------- - -
------- --------------
--------- -
----------- ----- -------- - ---- -- -- -
----- - ---------------- - - ----- -----
----- ------ - -------------------
----- - --------- --------- --------- ---- - - ----- --------------
-----
------
--
------ - --------- --------- --------- ---- --
-
-
--
----- ------ - --- --------------- --------- --------- ---
--------------- -- ------------------- ------- -- -------------------------在这里，我们使用 storeUpload 方法将文件保存到服务器，并将文件路径返回给客户端。在 processUpload 中，我们解析上传的文件内容并调用 storeUpload 将文件保存到服务器。
5. 测试文件上传接口
在完成以上步骤后，您可以通过发送以下查询来测试文件上传接口：
mutation {
uploadFile(file: { name: "face.jpg", type: "image/jpeg", size: 100000, path: "/path/to/upload" }) {
filename
mimetype
encoding
path
}
}这将发送文件上传请求，并返回上传文件的基本信息，包括文件名、文件类型、文件大小和文件路径。
总结
在本文中，我们介绍了如何在 GraphQL 中实现图片上传，并提供了详细的示例代码和建议。通过这些步骤，您可以在您的 GraphQL API 中支持文件上传，并为您的客户端提供更好的服务。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6475c3d8968c7c53b02c4e32