在前端开发中，文件上传是必不可少的功能之一。而在使用GraphQL进行服务端开发时，如何处理文件上传就显得比较困难。但现在，我们可以使用GraphQL的第三方解决方案 Apollo Server，它可以帮助我们方便地处理文件上传。
在本篇文章中，我们将介绍如何在GraphQL中使用File Uploads，一步步学习如何设置环境、定义schema、处理上传文件、以及如何在GraphQL Playground中进行文件上传测试等。
环境设置
在使用Apollo Server之前，需要先安装两个必要的依赖：apollo-server和graphql-upload。可以使用以下命令进行安装：
npm install apollo-server graphql graphql-upload
接着，我们需要在Apollo Server中使用graphqlUploadExpress中间件，具体代码如下：
-- -------------------- ---- -------
----- - ------------ - - -------------------------
----- - -------------------- - - --------------------------
----- ------ - --- --------------
-- --- -----
-------- ------ -- --------------
-------- ----- -- ---- --- -- -- --
----
----
---
---
------------------------
---- -- ------- ---
----- -----------
---
-------------------------------- -- ---------这段代码可以实现开启Apollo Server的GraphQL Playground，并使用File Uploads功能。需要注意的是，我们需要在上面代码中关闭uploads选项，等待中间件进行处理。同时，我们也需要定义context上下文，后面需要使用。
定义Schema
在GraphQL中，我们需要定义Schema来说明我们的数据模型。对于文件上传，我们需要增加对应的自定义类型，用于上传文件和获取上传文件的数据。
-- -------------------- ---- -------
----- - --- - - -------------------------
----- -------- - ----
------ ------
---- ---- -
--------- -------
--------- -------
--------- -------
---- -------
-
---- ----- -
------ --------
-
---- -------- -
------------------ --------- -----
--------------------- ------------ --------
-
--
-------------- - ---------在上面代码中，我们定义了两个mutation，分别是singleUpload和multipleUpload，用于上传单个文件和多个文件。同时定义了一个自定义类型Upload，用于上传文件数据。还需要定义一个自定义类型File，用于获取上传文件信息。
处理上传文件
在客户端发送上传请求之后，服务端需要对上传的文件进行处理，通过graphql-upload工具类实现文件的解析和上传。我们需要新建一个用于处理上传文件的resolver函数。
-- -------------------- ---- -------
----- - ----------------- - - --------------
----- - ------- - - ----------------
----- - ------ - - ------------------
----- ------------ - ----- --- - ---- -- -- -
----- - ----------------- --------- -------- - - ----- -----
----- ------ - -------------------
----- -- - ---------
----- ---- - ------------------ --------------------------------
------------------- ----------
----- ------- - --- ----------------- ------- --
------------------------------------
------------- -- -- --------- --- --------- --------- ---- ----------------------------------- ---
------------ --- -- -
------------------- -------
----------
--
--
------ --------
--
----- -------------- - ----- --- - ----- -- -- -
------ ----- --------------------------- ------ -- ----- ------------------ - ---- -----
--
-------------- - -
-------------
---------------
--在代码中，我们通过createReadStream方法获取上传文件的可读流，使用createWriteStream方法将可读流写入到服务器的磁盘上。最后，将文件信息和路径通过Promise返回给客户端。
需要注意的是，我们在上面的代码中添加了唯一的id作为文件名的标识，这样可以有效地防止文件重复覆盖问题。
测试文件上传
到这一步，我们就实现了文件上传功能，下一步我们需要在GraphQL Playground中进行测试。首先，我们需要在请求头部添加Content-Type: multipart/form-data，表明上传内容类型是多媒体数据。
接着，我们就可以通过GraphQL Playground进行文件上传测试了。在Playground的左边菜单面板中，选择MUTATION，并在右边QUERY VARIABLES中添加如下代码：
{
"file1": null,
"files": [null, null]
}在MUTATION面板中，我们可以使用singleUpload和multipleUpload函数进行文件上传操作。具体使用如下：
mutation SingleUpload($file1: Upload!) {
singleUpload(file: $file1) {
filename
mimeType
encoding
url
}
}mutation MultipleUpload($files: [Upload!]!) {
multipleUpload(files: $files) {
filename
mimeType
encoding
url
}
}点击QUERY VARIABLES中的运行按钮，在弹出的对话框中选择上传的文件，最后点击MUTATION面板的完成按钮即可提交。
总结
以上就是GraphQL中使用File Uploads的完整指南，我们学习了如何设置环境、定义Schema、处理上传文件、以及在GraphQL Playground中进行文件上传测试等操作。希望本文可以为大家在使用GraphQL进行前端开发时提供有价值的参考。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6545deda7d4982a6ebf87309