GraphQL 是一种用于 API 的查询语言，它具有强大的类型系统和灵活的查询能力，使得客户端可以精确获取所需的数据。但是，与 REST API 相比，GraphQL 在文件上传方面的支持不太好。本文将介绍如何使用 GraphQL 实现文件上传。
方案一：将文件转换为 Base64 格式
在 GraphQL 中，可以使用字符串类型传递文件数据。因此，一种简单的方法是将文件转换为 Base64 格式，然后在 GraphQL 查询中传递字符串数据。
以下是一个示例查询：
-------- ----------------- -------- -
---------------- ------ -
-------
-------
-
-在上面的查询中，file 是一个字符串类型的变量，它包含转换后的 Base64 数据。服务器端接收到该变量后，可以将其解码并存储为文件。
以下是使用 JavaScript 将文件转换为 Base64 格式的示例代码：
-------- ---------------------- -
------ --- ----------------- ------- -- -
----- ------ - --- ------------
------------- - -- -- ------------------------------------
-------------- - ------
--------------------------
--
-
----- --------- - --------------------------------------------
----- ---- - ------------------
----- ---------- - ----- ----------------------这里使用了 FileReader 对象将文件读取为 Data URL，然后从 Data URL 中提取出 Base64 数据。然后，可以使用 Apollo Client 或其他 GraphQL 客户端将该数据传递给服务器端。
虽然这种方法很简单，但它也存在一些缺点。首先，Base64 格式的数据比原始文件大小大约 33%，这意味着将占用更多的网络带宽。其次，文件的处理方式将不同于原始文件，这可能会导致一些问题。
方案二：使用 GraphQL Multipart 请求规范
为了支持更好的文件上传体验，GraphQL 社区制定了一项称为 GraphQL Multipart 请求规范 的标准。该标准允许客户端将多个部分的数据一起发送，其中包括文本和二进制数据。使用此方法，客户端可以直接将原始文件数据作为二进制流上传，而不需要进行任何转换。
以下是一个使用 GraphQL Multipart 请求规范的示例查询：
-------- ----------------- -------- -
---------------- ------ -
-------
-------
-
-在上面的查询中，file 是一个 Upload 类型的变量，它可以传递二进制数据。服务器端需要支持上传处理库，例如 apollo-server-upload 或 express-fileupload。这些库可以帮助在服务器端处理多部分的请求数据。
以下是在 Node.js 中使用 express-fileupload 库处理 GraphQL Multipart 请求的示例代码：
----- ------- - ------------------
----- ---------- - -----------------------------
----- - ----------- - - --------------------------
----- - -------------- -------------------- - - -------------------------
----- - ----------- - - ------------------
----- ------ - -------------
------ ------
---- ------------ -
-------- --------
-------- ------
-
---- -------- -
---------------- --------- -------------
-
--
----- --------- - -
----------- ----- -- ---- -- -- -
--- -
----- --------------------------------------------
------ - -------- ---- -
- ----- ----- -
------ - -------- ------ -------- ----------- -
-
--
-
----- --- - ---------
---------------------
-------------------
---------------------- ------------ --------- --------- -- ---
------------- ------- --------- --
-
---------------- -- -- -
------------------- ------- -- ---- ------
--在上面的代码中，使用了 graphql-upload 库来处理 Upload 类型。在 app.use 中添加了 graphqlUploadExpress() 中间件，以确保正确处理多部分请求数据。使用此方法上传文件时，可以将原始文件数据作为二进制流发送，而无需进行任何转换。
结论
在这篇文章中，我们介绍了两种使用 GraphQL 实现文件上传的方法。第一种方法是将文件转换为 Base64 格式，然后在 GraphQL 查询中使用字符串类型传递数据。第二种方法是使用 GraphQL Multipart 请求规范，直接上传原始文件数据作为二进制流。虽然这两种方法都可以实现文件上传，但第二种方法更为高效和可靠。使用第二种方法，可以获得更好的文件上传体验，并降低网络带宽成本。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6731c3960bc820c5823a4951