前言
GraphQL 是一种流行的数据查询和操纵语言，它广泛用于构建现代 Web 应用程序。它的弹性和可组合性使得它成为前端开发人员的首选。但当需要处理大规模文件上传时，工作呈现出了挑战性。
在该文中，我们将探讨使用 GraphQL 如何处理大文件的上传，我们还将分享如何使用 GraphQL API 处理大文件上传的最佳实践。
处理大文件上传的挑战
当使用 GraphQL 上传大型文件时，可能需要处理以下一些挑战：
- 内存消耗：文件上传时需要将文件缓存到内存中，如果上传的文件非常大，则可能需要大量内存。而且，上传的文件越大，越可能导致服务器崩溃。
- 网络稳定性：上传大文件时，如果因为网络中断造成上传失败，那么重新上传将成为一个挑战，因为重新上传更大的文件需要更长的时间。
解决这些问题的方法之一是使用连接（Relay-style 或 Apollo-upload-client）。
GraphQL 文件上传的最佳实践
1. 前端设置
首先，我们需要配置前端以接受文件流，并使用FormData API发送请求。以下是前端示例代码：
-- -------------------- ---- -------
------ - ---------------- - ---- ----------------------
------ ------------ ---- ---------------
----- ------ - --- --------------
----- ------------------
---- -----------
------------ ---------
--
--
----- ----------- - ----- ------ -- -
----- -------- - --- ----------
----------------------- -----
----- - ---- - - ----- ---------------
--------- -------------
---------- - ----- ---- --
-------- -
--------
-
--
-2. 后端设置
此处假设使用 Node.js 作为后端语言，使用 Apollo Server 作为 GraphQL 服务器。
1. 安装依赖
我们需要安装以下依赖：
npm install graphql-upload apollo-server-express multer
graphql-upload 将帮助我们处理文件，apollo-server-express 将帮助我们将 GraphQL 服务器集成到 Express 应用程序中，multer 是 Express 的文件上传中间件。
2. 启用文件上传
我们需要使用 graphql-upload 提供的中间件启用文件上传。以下是后端示例代码：
-- -------------------- ---- -------
----- ------- - ------------------
----- - ------------ - - --------------------------------
----- - -------------- -------------------- - - -------------------------
----- ------ - -----------------
----- --- - ---------
----- ------- - --------------------
------------ ----- ----- --- -- -
-------- ------------- -- ---------
-
--
----- ------ - --------
-------
--
----- -------- - -
------ ------
---- -------- -
---------------- --------- ------
-
-
----- --------- - -
------- -------------- -- ------- ------ --
--------- -
----------- ----- --- - ---- -- -- -
----- - ----------------- -------- - - ----- ----
----- ------ - ------------------
-- ---- --- ------ -- --- ------- -----------
----------------------------------------------------------
------ ----
-
-
-
----- ------ - --- --------------
---------
----------
-------- ----- -- ----- ------- ----
--
-------------------------------
------------------------ --- --
--------------------------- -- ----- -- -- -
------------------- ------- -- ----------------------------------- -- -------
--在上述代码中，我们创建了 file 字段是 Upload 类型的 uploadFile mutation。createReadStream 是 file 对象提供的方法，它允许我们从文件中读取流。
接下来，我们使用 createWriteStream 将文件流写入磁盘。writeStream 的目标位置可以通过 storage 参数设置。为了简单起见，这里我们将文件上传到 ./uploads/ 目录下。
最后，我们使用 graphqlUploadExpress() 启用文件上传中间件，并将 Apollo Server 集成到 Express 应用程序中。
结论
在这篇文章中，我们探讨了如何使用 GraphQL 处理大文件上传的挑战，以及使用 GraphQL 文件上传的最佳实践。如果您需要处理大规模文件上传，我们建议使用 Relay-style 或 Apollo-upload-client。
这些最佳实践应该让你重新定义文件大小和稳定性的界限，使 GraphQL 成为处理 Web 应用程序的首选工具之一。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6712340fad1e889fe2034582