GraphQL 是一种新型的 API 查询语言，它可以为 Web 应用程序提供更加精细、专注的数据查询能力。在 GraphQL 中，我们可以使用类似于 RESTful API 的方式获取或修改数据，但是 GraphQL 更加灵活、可扩展、类型安全和高效。
在实际的 Web 开发中，我们通常需要上传一些文件，例如图片、视频、音频等。而 GraphQL 的标准规范并没有提供文件上传的官方方法。本文将介绍一种在 GraphQL 中实现文件上传的方法，并提供一个基于 Node.js 和 Apollo Server 的示例代码。
实现方法
在 GraphQL 中实现文件上传的方法有很多种，例如使用 base64 编码、使用 FormData、使用 Multipart 等。这里我们选择使用 Multipart。
Multipart 是一种常见的 HTTP 请求体格式，通常用于上传文件、表单等数据。它的基本格式如下：
-- -------------------- ---- ------- ------------- -------------------- ----------------------------------------- ---------------------------------- -------------------- ---------- ------------- ------ ---------------------------------- -------------------- ---------- ------------- ------ ---------------------------------- -------------------- ---------- ------------ ---------------------- ------------- ---------- ----- -------- ------------------------------------
其中，boundary 是一个随机生成的字符串，用于标示内容的边界；每个字段都用 Content-Disposition 首部指定名称，文件名和字段类型；文件的内容则放在 Content-Type 首部指定的媒体类型的数据块中。
在 GraphQL 中，我们可以定义一个 Upload 标量类型，用于表示上传的文件。对于文件的传输，我们可以在 GraphQL Schema 中定义一个 Mutation 类型，并提供一个参数类型为 Upload 的字段，用于接收前端传递的 Multipart 请求。在后端实现中，我们可以使用一些现有的 Node.js 模块，例如 multer、formidable、busboy 等，来解析 Multipart 请求并将文件存储到服务器上。
下面是一个基于 Node.js 和 Apollo Server 的示例代码，用于实现 GraphQL 中的文件上传功能：
-- -------------------- ---- -------
----- - ------------- --- - - -------------------------
----- -- - --------------
----- - ----------------- - - --------------
----- - ---- - - ----------------
----- - -- - - ----------------
----- ---------- - ----------------------
----- -------- - ----
------ ------
---- -------- -
---------------- --------- ------
-
--
----- --------- - -
--------- -
----------- ----- -------- - ---- -- -- -
----- - ----------------- --------- -------- - - ----- -----
----- -- - -----
----- --------- - --------------- -----------
-- --------------------------- -
------------------------
-
----- -------- - --------------- ---------------------
----- --- ----------------- ------- --
------------------
----------------------------------
------------- -- -- ----------
------------ -- -- ----------
--
------ ---------
--
--
--
----- ------ - --- --------------
---------
----------
-------- -- --- -- -- -
----- ------- - ---
----- ----------- - --------------------------- -- ---
----- ---------- - ----------------------------------------------
-- ------------ -
----- ---- - ------------ ---------- ---- ---
----- ----- - ---
----- ------ - ---
------------------- - --- ----------------- ------- -- -
-------------------- ------ ----- -- -
----------- - -----
---
---------------- ------ ------ -- -
------------ - ------
---
--------------- ------ ----- -- -
----------- - -----
---
-------------- -- -- -
----------------- - -
---------------------
----------
---------
--
----------
---
----------------
---
-
------ --------
--
---
--------------------------- --- -- -- -
------------------- ----- -- ---------
---本例中使用的是 formidable 模块来解析 Multipart 请求，并使用 createReadStream 和 createWriteStream 方法来读取和写入文件内容。上传的文件会被保存到项目根目录下的 uploads 文件夹中，并以 uuid 和文件名的组合命名。
使用方法
在前端使用 GraphQL 来上传文件时，我们需要将文件内容转换成 Multipart 格式，并将请求发送到后端的 GraphQL API。下面是使用 fetch 函数的示例代码：
-- -------------------- ---- -------
----- ---------- - ----- ------ -- -
----- ---- - --- -----------
------------------------- ----------------
------ -
-------- ------- -------- -
---------------- ------
-
--
---------- -
----- -----
--
----
------------------ ----------------
----- -------------------
----
------------------- ------
----- -------- - ----- ------------------------------ -
------- -------
----- -----
---
----- - ----- ------ - - ----- ----------------
-- -------- -
----- --- -------------------------
-
------ ----------------
--
----- --------- - -------------------------------------
------------------------------------ ----- ------- -- -
----- ---- - ----------------------
-- ------- -
-------
-
--- -
----- -------- - ----- -----------------
----------------- -------- --- --------------
- ----- ------- -
----------------- ------ ------- -------------------
-
---在上面的代码中，首先创建了一个包含 GraphQL 查询和变量的对象 operations，并通过 map 对象指定哪些变量对应哪些文件。然后将文件内容添加到 FormData 中，并使用 fetch 发送一个 POST 请求到 GraphQL API。最后解析响应，获取上传成功后的文件路径。
总结
本文介绍了如何在 GraphQL 中实现文件上传的方法，并提供了一个基于 Node.js 和 Apollo Server 的示例代码。通过本文的学习，我们可以掌握在 GraphQL 中处理 Multipart 请求和文件上传的技能，在实践中更好地应用 GraphQL 技术，为 Web 应用带来更加灵活、高效、安全的数据管理能力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/652d088b7d4982a6ebe859bd