随着现代 Web 应用程序的发展，越来越多的应用程序需要支持文件上传。GraphQL 是一种新兴的 API 查询语言和运行时，它提供了一种与客户端和服务器之间进行高效通信的方式。在 GraphQL 中处理文件上传是一个相对较新的问题，但是有了一些简单的技巧和最佳实践，您可以容易地在 GraphQL API 中处理文件上传并获得最佳的性能和保障。
GraphQL 和文件上传
GraphQL 是一种查询语言，可以定义如何对服务器进行请求，并且可以精确地返回所需的数据。以前，处理文件上传需要使用多部分表单数据，这可能会导致性能问题和开发人员的困惑。随着 GraphQL 的发展，一些开发者开始考虑使用 GraphQL 来处理文件上传。然而，GraphQL 并不直接支持文件上传，所以需要开发人员自己来实现这个功能。
处理 GraphQL 中的文件上传
处理 GraphQL 中的文件上传分为两个部分：客户端和服务器端。客户端必须准备好文件以便发送到服务器。服务器必须解析传入的文件并将其保存到磁盘上。
客户端
首先，客户端必须准备好上传文件。将文件编码为 Base64 字符串是不推荐的，因为它会增加传输的数据大小。相反，最常用的方法是在发送之前将文件分段，并使用分块上传的数据流将其发送到服务器。对于这个任务，我们可以使用 xhr2 这个 NPM 包来处理文件上传的流程。
以下是示例代码：
----- --- - --- -----------------
----- -------- - --- -----------
----- ---- - ------------------------------------------
----- --------- - ---- - -----
--- ----- - --
--- --- - ----------
--- ------ - --
----------- - ---------- -
----- ---- - ----------------- -----
----------------------- - ------- ------
---------
----- - ----
--- - ----- - ----------
-
---------------- -----------
-------------------以上代码使用一个 while 循环将文件分段，然后将每个块添加到 FormData 中，最后使用 xhr 对象将其发送到服务器。需要注意的是，如果文件太大，那么在一段时间内无法上传，就需要使用 Web Workers 或 Service Workers 来处理这个问题。
服务器端
当客户端将文件上传到服务器时，服务器必须开箱即用地处理文件。文件传输本质上是将文件切成块，然后逐一上传块。解决这个问题的最佳方案是使用 GraphQL 的 resolve info 上下文，该上下文包含了文件上传所需的所有信息，并且在查询中可以直接使用。
以下是处理 GraphQL 文件上传的 Node.js 示例代码：
----- - ------------- - - --------------------------
----- - ------------------ ------------- - - -------------------
----- -------- - --- -------------------
----- -------
------- -- -- --
--------- - ----- ------------- --
--------- - ----- ------------- --
--------- - ----- ------------- -
--
---
----- ---------------- - --- -------------------
----- ---------------
------- -
----------- -
----- ---------
----- -
----- - ----- ------------- -
--
-------- ----- -------- - ---- -- - ----------- ---- -- -- -
----- - ----------------- --------- --------- -------- - - ----- -----
----- ------ - -------------------
-- -----
------ - --------- --------- -------- -- -- ------
-
-
-
---
----- ------ - --- ---------------
--------- ----------------
---在本例中，我们使用了一个名为 graphql-upload 的 NPM 包，这是一个用于处理文件上传的库。要上传文件，客户端必须将它们添加到 GraphQL 查询中。必须使用 GraphQL multipart 请求 协议来提交文件，并且服务器必须使用相应的中间件和处理程序。
结论
在 GraphQL 中处理文件上传需要一些注意和工作，但是使用以下最佳实践可以让开发人员最大化地减少错误并实现良好的性能：
- 在客户端使用分块上传，不要编码文件为 Base64 字符串。
- 服务器端使用适当的 GraphQL 中间件和处理程序。
- 尽可能处理文件流而不是将整个文件读入内存中。
- 使用上下文信息来获取上传文件的信息以及处理它们。
使用这些技巧，您可以处理文件上传并确保您在将来上传文件时能够获得最佳的性能和保障。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6706a8bdd91dce0dc860237a