GraphQL 是一种用于 API 开发的查询语言和运行时环境。它可以与多种后端语言和数据库集成，并且其灵活性也为前端提供了更好的开发体验。然而，与传统的 RESTful API 不同的是，GraphQL 并不支持简单的文件上传。本文将介绍在 GraphQL 中处理文件上传的方式，并提供示例代码。
概述
GraphQL 自身并不支持文件上传，但可以使用第三方包来达到该目的。其中，最常用的包是 apollo-upload-client 和 graphql-upload。前者是 Apollo 官方提供的包，可以在前端和后端同时使用；而后者则是纯 JavaScript 实现的，可以在任何语言和平台上使用。
逐步实现
前端实现
安装依赖
在前端项目中安装 apollo-upload-client：
--- ------- --------------------
创建上传组件
接下来，我们创建一个上传组件，用于选择文件和上传文件。示例代码如下：
-- -------
------ - ----------- - ---- ----------------------
------ - ----------- - ---- ----------------------
-- ---------
-------- -------- -
----- ------ -------- - ---------------
----- ---------- ------------ - ----------------
----- ------------ - -------------------------
----- ------------ - --- -- -
---------------------------
--
----- ------------ - ----- --- -- -
-------------------
--- -
----- - ---- - - ----- ------------ ---------- - ---- - ---
------------------
------------------
- ----- ----- -
-------------------
-
--
------ -
-----
----- ------------------------
------ ----------- ----------------------- --
------- -------------------- -------------
-------
--------- -- ------- -------- ------------------
------
--
-定义 GraphQL Mutation
接下来，我们需要在 GraphQL 服务端中定义 Upload Mutation。示例代码如下：
-- -------
----- - ------------- - - --------------------------
----- - ------------------ ------------- - - -------------------
----- -- - --------------
-- ------ --------
----- -------------- - --- -------------------
----- -----------------
------- -
----------- -
----- --------------
----- -
----- - ----- ------------- --
--
----- --------------- - ---- -- -
----- - ----------------- -------- - - ----- -----
----- ------ - -------------------
----- ---- - -----------------------------------
------ --- ----------------- ------- --
------
---------------------------------
------------- -- -- ------------------
------------ -------
--
--
--
--
---创建 Apollo 实例
接下来，我们需要创建 Apollo 客户端实例，并将 apollo-link-http 和 apollo-upload-client 包分别传递给该实例。示例代码如下：
-- -------
------ ------------ ---- ----------------
------ - -------------- - ---- ----------------------
------ - ---------------- - ---- -----------------------
------ - ------------- - ---- ------------------------
-- ------ ------ ------
----- ------ - --- --------------
----- ------------------
---- --------------------------------
---
------ --- ----------------
---
-- ---- ----------- ---- --------------
-------- ----- -
------ -
--------------- ----------------
------- --
-----------------
--
-后端实现
安装依赖
我们需要安装 graphql-upload 包，用于处理文件上传。示例代码如下：
--- ------- --------------
配置 Express
我们使用 Express 作为 GraphQL 服务端，需要用 graphql-upload 包提供的 graphqlUploadExpress 函数来配置 Express。示例代码如下：
-- ------- ----- - ------------ - - --------------------------------- ----- ------- - ------------------- ----- - -------------------- - - -------------------------- ----- -------- - -------------------- ----- --------- - ----------------------- -- ------ ------ ------ ----- ------ - --- -------------- --------- ---------- --- -- ------ ------- --- ----- --- - ---------- -- ------ ---------- ------------------------------ ------------ --------- --------- -- ---- -- ----- ---------- -- ------ ------ ------------------------ --- --- -- ------ -- ---- ---------------- -- -- - ------------------- ------- -- ---- ------------------------ ---
处理文件上传
最后，在 GraphQL 服务端的 Resolver 中，我们需要处理文件上传。示例代码如下：
-- -------
----- - ------------- - - --------------------------
----- - ------------------ ------------- - - -------------------
----- -- - --------------
-- ------ --------
----- -------------- - --- -------------------
----- -----------------
------- -
----------- -
----- --------------
----- -
----- - ----- ------------- --
--
----- --------------- - ---- -- -
----- - ----------------- -------- - - ----- -----
----- ------ - -------------------
----- ---- - -----------------------------------
------ --- ----------------- ------- --
------
---------------------------------
------------- -- -- ------------------
------------ -------
--
--
--
--
---
-- ------ ---- -----
----- --------- - --- -------------------
----- ------------
------- -
------ -
----- --------------
--------- -
------ ------- --------
--
--
--
---
-- ------ ---- --------
----- ------------ - --- -------------------
----- ---------------
------- -
-------------------------
--
---
-- ------ ------
----- ------ - --- ---------------
------ ----------
--------- -------------
---
-------------- - -------结论
上述就是使用 apollo-upload-client 和 graphql-upload 包处理 GraphQL 中的文件上传的方法。虽然这不是标准的 GraphQL API，但这种方法已被广泛采用，并且很容易在实现 GraphQL API 时遇到。希望这篇文章能对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671714d1ad1e889fe21f9c76