GraphQL与REST相比，在处理文件上传方面具有很大优势。GraphQL通过Multipart请求处理文件上传，可以上传多个文件，并且可以为每个文件添加元数据。这意味着对于那些需要处理大量文件的应用程序，GraphQL可以更好地满足需求。
如何在GraphQL中处理文件上传呢？接下来我们将逐步介绍。
在Schema中定义类型
首先，我们需要在Schema中定义类型来接受文件上传。在这个例子中，我们创建了一个名为 File 的类型。
type File {
filename: String!
mimetype: String!
encoding: String!
}在定义类型的时候，我们需要确定三个属性：filename、mimetype和encoding。这些属性用于跟踪文件的元数据。
使用GraphQL Upload库来处理文件上传
一般来说，我们使用GraphQL Upload库来处理文件上传。首先我们需要安装它：
npm install graphql-upload
然后，在项目中使用它：
-- -------------------- ---- -------
-- --------
----- - ------------- --- - - -------------------------
----- - ------------- - - --------------------------
-- -- ------
----- -------- - ----
------ ------
---- ---- -
--------- -------
--------- -------
--------- -------
-
---- ----- -
-------- ------
-
---- -------- -
---------------- --------- -------
-
--
-- ----
----- --------- - -
------- --------------
------ -
-------- -- -- ---
--
--------- -
----------- ----- -------- - ---- -- -- -
----- - ----------------- --------- --------- -------- - - ----- -----
-- ----------------------------
------ -----
--
--
--
-- -----
----- ------ - --- --------------
---------
----------
---
-- -----
----------------------- --- -- -- -
------------------- ------ -- ------- -- ---------
---在上传文件时，需要将文件作为参数传递给 uploadFilemutation。
完成文件上传后，我们可以像往常一样处理上传的流，比如将文件储存在云存储OSS中。这是一种简单而灵活的解决方案。
处理多文件上传
我们已经成功地上传了一个文件，也可以上传多个文件。我们将 uploadFile 变成 uploadFiles 并将其参数类型更改为 file： [Upload]。
type Mutation {
uploadFiles(files: [Upload!]!): [File]!
}我们还需要修改 uploadFilesmutation的resolver函数，以便它能处理上传的多个文件：
-- -------------------- ---- -------
--------- -
------------ ----- -------- - ----- -- -- -
----- -------- - ----- ------------
--------------- ------ -- -
----- - ----------------- --------- --------- -------- - - ----- -----
-- -------------------------------
------ - --------- --------- -------- --
--
--
-- ------
------ ---------
--
--现在，我们可以在一个文件数组中上传多个文件。
结论
在GraphQL中处理文件上传看似复杂，但实际上非常简单。使用GraphQL Upload库我们可以轻松地处理文件上传，包括单个文件和多个文件。
本文提到了用一些示例代码演示了在GraphQL中处理文件上传的方式，你可以将其运用到实际开发中，从而更好的实现你的业务场景。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66fb1899447136260156ab33