在前端开发中，处理文件上传是非常常见而又繁琐的操作。而在使用 GraphQL 进行网络请求时，如何处理文件上传则成为了一个新的问题。本篇文章将介绍使用 GraphQL 处理文件上传的方法，为你开发时提供指导和帮助。
GraphQL 中的文件上传
在 GraphQL 中，文件上传的解决方案有两种：使用 Base64 编码传递文件内容或使用 multipart/form-data 的方式进行传输。
使用 Base64 编码传递文件内容
使用 Base64 编码将文件内容传递给 GraphQL 服务器是比较简单的一种方法。需要将文件内容转换为 Base64 编码后，传递给服务器即可。在 GraphQL 类型定义中，文件类型可以定义为字符串类型，如下所示：
-- -------------------- ---- ------- ------ ------ ---- ---- - ------- ------ - ---- -------- - ------------------------ --------- ---- -
在这个示例中，Upload 是一个自定义的标量类型，它的定义如下：
scalar Upload directive @constraint( # 最大文件尺寸（MB），默认值 2MB maxSize: Int = 2 ) on INPUT_FIELD_DEFINITION | ARGUMENT_DEFINITION
使用 Upload 自定义标量类型时，可以添加 @constraint 指令来对文件的大小进行限制。maxSize 属性表示的是最大限制大小，单位是 MB。在使用 Upload 类型时，还需要使用 GraphQLUpload 模块来解析文件。GraphQLUpload 模块是一个专门用于解析文件上传的中间件，可在 npm 上进行下载。
在服务器端需要做两步操作：验证上传的文件大小标准和保存文件。如果文件符合标准，直接将文件保存到服务器上即可。
使用 multipart/form-data 进行上传
另一种常见的方式是使用 multipart/form-data。此类型的请求包含一个文件和其他表单字段。如果使用此类型来上传文件，则需要使用一个名为 FormData 的对象来包装数据和文件。以下是示例代码：
-- -------------------- ---- -------
----- -------- - --- ----------
------------------------- -----------
----------------------- ----- -----
------------------ -
------- -------
-------- -
-- ---- ------------ - -------------------
--------------- ----------------------
--
----- --------
--在 GraphQL 类型定义中，文件类型可以定义为 Upload 类型，如下所示：
-- -------------------- ---- ------- ------ ------ ---- ---- - ------- ------ - ---- -------- - ------------------------ --------- ---- -
在 GraphQL 服务器端要做两步操作：第一步是解析请求并将文件保存到服务器上；第二步是将传递给 Resolver 函数的对象中的 Upload 处理。在解析 Upload 类型时，需要使用 GraphQLUpload 模块进行解析。这个模块还可以执行验证和转换操作。
以下是一个处理上传文件的 Resolver 函数示例代码：
-- -------------------- ---- -------
------ - ----------------- - ---- ----
------ - ------------- - ---- -----
------ - ----- ------- - ---- ------
------ - ------------- - ---- ----------------
----- ---------- - ------------------------------
----- --------- - -------------------
----- --------- - --------------- ----------
-- ------------------------ -
-------------------- - ---------- ---- --
-
----- --------- - -
--------- -
----------------- ----- --- - ------ -- -- -
----- - ----------------- --------- --------- -------- - - ----- ------
-- --------------------
----- ------ - ------------------
----- -------- - --------------- ---------
-- ---------
----- --- --------------- -- -
----- ----------- - ---------------------------
---------------- --------
------------ ----- -- -
--------------------
-------------
--
------------------
--
------ - --------- --------- --------- ---- -------- -
-
--
------- -------------
-总结
本文介绍了两种常用的 GraphQL 中的文件上传方式：使用 Base64 编码传递文件内容和使用 multipart/form-data 进行上传。对于上传文件，我们需要在 GraphQL 类型定义中使用 Upload 类型，并在 GraphQL 服务器端处理该类型。为了解析 Upload 类型，我们需要使用 GraphQLUpload 模块，这个模块还能执行验证和转换操作。这些内容很重要，掌握这些技术可以帮助你更好地处理 GraphQL 中的文件上传。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f03abff6b2d6eab3a2f648