在 GraphQL 中添加文件上传功能

阅读时长 7 分钟读完

GraphQL 是一种用于 API 的查询语言,它提供了一种更加灵活、高效、强大的数据查询和操作方式。在 GraphQL 中,我们可以轻松地定义数据模型和查询操作,但是,官方并没有提供文件上传的解决方案。本文将介绍如何在 GraphQL 中添加文件上传功能,并提供示例代码以供学习和参考。

为什么需要文件上传?

在实际的开发中,文件上传是一个不可避免的需求。比如在社交应用中,用户可以上传头像或者图片;在电商应用中,用户可以上传商品图片或者评价图片。如果没有文件上传功能,我们很难实现这些功能。

如何在 GraphQL 中添加文件上传?

在 GraphQL 中添加文件上传功能需要借助外部库,我们可以使用 multer 或者 apollo-upload-server 这些库来实现文件上传。这里我们选择 apollo-upload-server 来添加文件上传功能。

1. 安装 apollo-upload-server

2. 添加文件上传中间件

我们需要在 GraphQL Server 中添加文件上传中间件,这里我们使用 Express.js 作为 GraphQL Server。需要注意的是,添加文件上传中间件需要在 GraphQL Server 的路由之前。

-- -------------------- ---- -------
----- - ------------ - - ---------------------------------
----- - -------------------- - - --------------------------------

----- ------- - -------------------
----- --- - ----------

-- ---------
------------------------------ ------------ --------- --------- -- ----

-- -- ------------
----- ------ - --- -------------- --------- --------- ---

-- - ------------ - ---------- --
------------------------ --- ---

-- -----
------------ ----- ---- -- -- --
  --------------- ------ ----- -- --------------------------------------------
--

在上述代码中,我们使用 graphqlUploadExpress 函数添加文件上传中间件,并设置了文件大小限制和上传文件数量限制。

3. 在 GraphQL Schema 中定义文件上传类型

在 GraphQL 中,默认情况下,输入参数只支持标量类型和自定义类型,不支持文件类型。因此,我们需要定义一个新的 Upload 类型。

这样,在我们的 GraphQL Schema 中,就可以支持文件上传了。

4. 在 GraphQL Resolvers 中添加文件上传解析器

在 GraphQL Resolvers 中,我们需要添加文件上传的解析器。这样,当客户端发起一个文件上传请求时,服务器就可以接收到请求,并通过解析器来处理这个上传请求。

-- -------------------- ---- -------
----- - ----------------- - - --------------
----- ---- - ----------------

----- --------- - -
  ------ - --- --
  --------- -
    ----------- ----- --- - ---- -- -- -
      ----- - ----------------- -------- - - ----- -----

      ----- ------ - -------------------
      ----- -------- - -------------------- ---------- ----------
      ----- ----------- - ----------------------------

      ----- -------------------------

      ------ - -------- ----- -------- ----- -------- ------------- --
    -
  -
--

在上述代码中,我们定义了一个 uploadFile Mutation,它的输入参数有一个 file,这个 file 参数的类型是 Upload。当客户端发起这个 Mutation 请求时,服务器就会接收到请求,并在解析 file 参数时,自动解析出文件流和文件名。我们只需要将文件流写入到指定的文件路径中即可。

示例代码

下面是一个完整的示例代码,供读者参考和学习。

-- -------------------- ---- -------
----- -- - --------------
----- ---- - ----------------
----- ------- - -------------------
----- - ------------- --- - - ---------------------------------
----- - -------------------- - - --------------------------------

----- --- - ----------

-- ---------
------------------------------ ------------ --------- --------- -- ----

-- -- ------- ------
----- -------- - ----
  ------ ------

  ---- ---- -
    -------- --------
    -------- -------
  -

  ---- ----- -
    ------ ------
  -

  ---- -------- -
    ---------------- --------- -----
  -
--

-- -----
----- --------- - -
  ------ -
    ------ -- -- ------ -------
  --

  --------- -
    ----------- ----- --- - ---- -- -- -
      ----- - ----------------- -------- - - ----- -----

      ----- ------ - -------------------
      ----- -------- - -------------------- ---------- ----------
      ----- ----------- - -------------------------------

      ----- -------------------------

      ------ - -------- ----- -------- ----- -------- ------------- --
    -
  -
--

-- -- ------------
----- ------ - --- -------------- --------- --------- ---

-- - ------------ - ---------- --
------------------------ --- ---

-- -----
------------ ----- ---- -- -- --
  --------------- ------ ----- -- --------------------------------------------
--

可以使用以下命令启动服务器:

总结

本文介绍了如何在 GraphQL 中添加文件上传功能。通过安装 apollo-upload-server 库、添加文件上传中间件、在 GraphQL Schema 中定义 Upload 类型以及在 GraphQL Resolvers 中添加文件上传解析器等步骤,我们可以轻松地实现文件上传功能。这个技术对于开发社交应用、电商应用等涉及图片、视频等的应用非常有用。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6450c408980a9b385b9af644

纠错
反馈