GraphQL 是一种 API 查询语言，它可以帮助前端开发人员更有效地构建和管理后端 API。在使用 GraphQL 时，与传统 RESTful API 不同的是，客户端可以通过单个请求获取所需的数据。虽然 GraphQL 可以方便地传输各种数据类型，但在处理文件时，操作可能会复杂一些。在本篇文章中，我们将介绍如何使用 GraphQL 在前端中上传和下载文件。
上传文件
使用 GraphQL 上传文件的方法依赖于服务端实现的方式。在本文中，我们假设后端使用 Node.js 和 Apollo Server。
安装依赖
在 Node.js 中，可以使用 multipart/form-data 格式的 HTTP 请求上传文件。我们需要安装以下两个库：
apollo-server-express: 帮助构建 Apollo 服务器的 Node.js 库。graphql-upload: 用于处理文件上传的 Node.js 库。
您可以使用以下命令安装这些库：
npm install apollo-server-express graphql-upload
创建 schema
在 schema 中定义上传文件的类型：
-- -------------------- ---- ------- ---- ---- - --------- ------- --------- ------- --------- ------- ---- ------- - ---- -------- - ---------------- --------- ----- -
我们使用 Upload 标量类型来表示上传的文件。在 File 类型中，我们定义了各种文件类型的元数据，包括文件名、MIME 类型、编码和 URL。在 Mutation 类型中，我们定义了一个名为 uploadFile 的操作，该操作接收一个 file 参数。
实现上传 API
在服务端实现功能的 API，我们需要创建一个 Express 应用程序，使用 apollo-server-express 构建 Apollo Server，以及使用 graphql-upload 处理文件上传。以下是实现 uploadFile API 的代码：
-- -------------------- ---- -------
----- - ------------- --- - - ---------------------------------
----- - ----------------- - - --------------
----- - -------------------- - - --------------------------
----- -------- - ----
---- ---- -
--------- -------
--------- -------
--------- -------
---- -------
-
---- -------- -
---------------- --------- -----
-
--
----- --------- - -
--------- -
----------- ----- --- - ---- -- -- -
----- - ----------------- --------- --------- -------- - - ----- -----
----- ------ - -------------------
----- ---- - ----------------------
------ --- ----------------- ------- --
------
------------------------------
------------- -- --
---------
---------
---------
---------
---- --------------------------------
--
-
------------ -------
--
--
--
--
----- ------ - --- -------------- --------- --------- ---
----- --- - ----------
--------------------------------
------------------------ ---- ----- ---------- ---
------------ ----- ---- -- -- --
--------------- ------ ----- -- --------------------------------------------
--在上面的代码中，我们创建了一个 uploadFile 的 Mutation 类型的解析程序，并在其中获取来自客户端的 file 对象，并从中提取文件流、文件名、MIME 类型和编码。然后，我们将文件流复制到 uploads 文件夹中，并返回 File 类型的对象，该对象包含上传文件的元数据和 URL。
为了使用 graphql-upload，我们将 graphqlUploadExpress 中间件应用于 Express 应用程序。每当 GraphQL 查询中包含 Upload 标量类型时，该中间件将请求解析为可迭代的对象，并将这些对象放置在 file 字段中。
请注意，上面的代码只是示例代码，您可以根据需要进行更改。
客户端上传
一旦服务端 API 准备就绪，客户端就可以通过构造 FormData 对象上传文件。以下是一个简单的示例，展示了如何使用 JavaScript 对象和 mutation 来上传文件：
-- -------------------- ---- -------
------ - ---- ----------- - ---- -----------------
----- ----------- - ----
-------- ----------------- -------- -
---------------- ------ -
--------
--------
--------
---
-
-
--
-------- ----- -
----- ------------ - -------------------------
----- ---------------- - ------- -- -
----- ---- - ----------------------
------------ ---------- - ---- - ---
--
------ -
-----
------ ----------- --------------------------- --
------
--
-在上面的代码中，我们导入了 gql 和 useMutation 来创建并使用一个 UPLOAD_FILE mutation。然后，我们通过调用 handleFileUpload 函数在用户选择文件时上传文件。
下载文件
当使用 GraphQL 作为 RESTful API 时，您将客户端从特定 URL 下载文件，但在 GraphQL 中，您需要使用查询和解析程序获取文件，并将其返回给客户端。以下是在 GraphQL 中下载文件的简单示例。
定义 schema
首先，在您的 schema 中定义可以返回文件的新类型：
-- -------------------- ---- ------- ---- ----- - ---------------------- --------- ----- - ---- ---- - --------- ------- --------- ------- --------- ------- -------- ------- -
在 Query 类型中，我们定义了一个名为 downloadFile 的操作，该操作接收一个文件名，并返回一个文件对象。在 File 类型中，我们定义了各种文件类型的元数据，包括文件名、MIME 类型、编码和内容。
实现下载 API
然后，创建一个返回文件的解析程序。以下是实现 downloadFile API 的代码：
-- -------------------- ---- -------
----- - ------------- --- - - ---------------------------------
----- -------- - ----
---- ----- -
---------------------- --------- -----
-
---- ---- -
--------- -------
--------- -------
--------- -------
-------- -------
-
--
----- --------- - -
------ -
----- ------------ --- - -------- -- -
----- -------- - ---------------------
----- -- - --------------
----- ------- - ------------------------- - --------- -------- ---
------ -
--------- ---------
--------- ---------------------------
--------- ---------
-------- -------
-
--
--
--
----- ------ - --- -------------- --------- --------- ---
----- --- - ----------
------------------------ ---- ----- ---------- ---
------------ ----- ---- -- -- --
--------------- ------ ----- -- --------------------------------------------
--上述代码中，我们从本地文件系统获取请求文件的内容，并以 base64 编码返回文件对象。
客户端下载
一旦服务端 API 准备就绪，客户端可以发送查询以获取文件，并将其保存到计算机上。以下是一个简单的示例，展示了如何使用 JavaScript 对象和 window.open 函数来下载文件：
-- -------------------- ---- -------
------ - ---- -------- - ---- -----------------
----- ------------- - ----
----- ----------------------- -------- -
---------------------- ---------- -
--------
--------
--------
-------
-
-
--
-------- ----- -
----- - ----- -------- ----- - - ----------------------- - ---------- - --------- ------------- - ---
----- -------------- - -- -- -
-------- -
----- ---- - --- --------------------------------------- - ----- -------------------------- ---
----- ------- - --------------------------
---------------------
-
--
------ -
-----
-------- -
----------------- - -
----- -
--------------- - -
---- -- ------- ------------------------------------------
-
-
-
------
--
-在上述代码中，我们使用 useQuery hook 发送一个名为 DOWNLOAD_FILE 的查询，并在 handleDownload 函数中映射客户端下载的文件。首先，我们将 data.downloadFile.content 基本解码，并将其转换为 Blob。然后，我们使用 URL.createObjectURL 函数生成一个文件 URL，该 URL 包含请求的文件。最后，我们将 URL 传递给 window.open 函数以启动下载。
结论
GraphQL 作为一种优秀的 API 查询语言，可以帮助前端开发人员更有效地使用后端 API。本文介绍了如何在前端中使用 GraphQL 上传和下载文件，以及如何在 GraphQL schema 和解析程序中定义文件类型。尽管文件处理可能会带来一定的挑战，但使用 GraphQL 可以让它变得更加容易。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f79ab7c5c563ced5a4bb93