GraphQL 是一种用于 API 构建的查询语言和运行时。尤其在前端领域，GraphQL 已经成为了主流，它支持前端应用来组合自由多个请求以及接收想要的数据，而无需受API的限制。不过，谈到上传文件时，GraphQL 需要特定的文件解析器，以处理文件上传请求。本文将详细介绍上传文件的处理过程，并提供示例代码。
文件上传解析器
GraphQL 不能在本身实现文件上传解析，因此需要使用 graphql-upload 解析器。该解析器提供了 GraphQL 操作中 Upload 类型的解析，以及 createReadableStream() 方法将字节流转换为 Node.js 可读流。
服务器端设置
首先，我们需要在服务器端进行以下设置：
安装 graphql-upload
使用 npm 或 yarn 安装 graphql-upload。
npm install graphql-upload
或者
yarn add graphql-upload
服务器端 GraphQL Schema 添加 Upload 类型
在 GraphQL 的服务器端更新 Schema，并添加 Upload 类型。
-- -------------------- ---- ------- ----- - ------------- - - -------------------------- -- --- ----- -------- - ---- ------ ------ -- --- -- -- --- ----- --------- - - ------- -------------- -- --- --
服务器端上传文件解析器
使用 graphql-upload 中的 graphqlUploadExpress() 解析器来处理上传文件。请注意，上传请求应该是 multipart/form-data 类型。
const express = require('express');
const { graphqlUploadExpress } = require('graphql-upload');
const app = express();
// ...
app.use(graphqlUploadExpress({ maxFileSize: 10000000, maxFiles: 10 }));GraphQL 查询设置
在 GraphQL 查询中进行以下设置：
GraphQL 查询添加 Upload 参数
为文件上传创建输入类型，并在查询里添加 Upload 参数。
-- -------------------- ---- -------
----- -------- - ----
----- --------- -
----- -------
----- -------
----- ----
----- -------
-
---- -------- -
---------------- --------- ----------
-
--Resolver 处理上传文件
使用 createReadStream() 方法创建读取字节流，在服务器端使用该字节流创建文件。
-- -------------------- ---- -------
----- - ----------------- - - --------------
----- --------- - -
--------- -
----------- ----- --- - ---- -- -- -
----- - ----------------- -------- - - ----- -----
----- ------ - -------------------
----- ---- - ------------------------
----- --- ----------------- ------- -- -
------
------------ ----- -- -
-- ------------------ -
-- --------
--------------------
-
--------------
--
------------------------------
------------ -------
------------- ---------
---
------ - ----- --------- ----- -------------- ----- ---------- ---- --
--
--
--这里我们假设文件将上传到 ./uploads 文件夹中，并返回了文件的名称、类型、大小和路径。
示例代码
下面是一个完整的服务器端和客户端示例代码：
服务器端代码
-- -------------------- ---- -------
----- ------- - -------------------
----- - ----------- - - ---------------------------
----- - -------------------- - - --------------------------
----- - -------------------- - - ---------------------------------
----- - --- - - -------------------------
----- -------- - ----
------ ------
----- --------- -
----- -------
----- -------
----- ----
----- -------
-
---- -------- -
---------------- --------- ----------
-
--
----- --------- - -
------- --------------
--------- -
----------- ----- --- - ---- -- -- -
----- - ----------------- -------- - - ----- -----
----- ------ - -------------------
----- ---- - ------------------------
----- --- ----------------- ------- -- -
------
------------ ----- -- -
-- ------------------ -
--------------------
-
--------------
--
------------------------------
------------ -------
------------- ---------
---
------ - ----- --------- ----- -------------- ----- ---------- ---- --
--
--
--
----- ------ - ---------------------- --------- --------- ---
----- --- - ----------
------------------------------ ------------ --------- --------- -- ----
--------
-----------
-------------
-------
--------- -----
--
--
---------------- -- -- -
--------------- --- ------- -- ---- -------
---客户端代码
-- -------------------- ---- -------
------ - ------------- -------------- --- - ---- -----------------
------ - ---------------- - ---- -----------------------
------ - -------- - ---- --------
----- ------ - --- --------------
------ --- ----------------
----- ------------------
---- -----------
-------- ---
---
---
-------- ----- -
----- ------ -------- - -----------
----- ---------- - - -- -
---------------------------
--
----- ------------ - ----- -- -- -
----- ---- - --- -----------
------------------- ------
----- --- - ----- ---------------
--------- ----
-------- ----------------- -------- -
---------------- ------ -
----
----
----
----
-
-
--
---------- -
----- -----------------
--
---
----------------------
--
------ -
-----
------ ----------- ---------------- --------------------- --
------- --------------------------------------
------
--
-
------ ------- ----结论
在本文中，我们通过使用 graphql-upload 解析器和 createReadStream() 方法，实现了针对 GraphQL 的上传文件。我们介绍了在服务器端和客户端建立所需的设置，以及上传文件的完整代码示例。对于需要 GraphQL 上传文件的 Web 应用开发人员而言，本文提供了深入了解如何上传文件的指南。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670de6f85f551281025ef1e1