GraphQL 中如何实现文件上传和下载?

GraphQL 是一种查询语言和运行时环境,用于管理 API 中的数据。GraphQL 的优点在于有着强大的类型系统和灵活的查询语言,允许客户端只请求所需的数据,避免了 REST API 中过度获取数据的问题。

然而,GraphQL 难以处理文件上传和下载这类操作,因为文件通常需要使用 multipart/form-data 格式进行传输,而不是像 JSON 和 GraphQL 查询一样的普通格式。

在本文中,我们将学习如何在 GraphQL 中实现文件上传和下载的功能,并提供一些示例代码供参考。

文件上传

在 GraphQL 中处理文件上传的方法主要有两种:一是基于 Multipart/form-data 格式的传输;二是使用 Base64 编码字符串的方式。

Multipart/form-data 格式

在使用 Multipart/form-data 格式进行文件上传时,客户端需要将数据打包为多部分的形式发送给服务端。每个部分都必须带有 Content-Disposition 首部指定其类型和名称。服务端需要根据 Content-Disposition 处理上传文件的部分。

以下是一个示例的 GraphQL 查询:

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

其中,文件上传参数 file 声明为 Upload 类型。

在客户端,可以使用 FormData 对象构建表单,将需要上传的文件添加到其中,并将其作为 fetch 方法的第二个参数传递。

以下是一个使用了 FormData 的示例代码:

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

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

在服务端,需要使用 graphql-upload 这个中间件来承载上传的文件。以下是使用 graphql-upload 的示例:

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

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

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

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

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

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

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

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

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

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

Base64 编码

在使用 Base64 编码上传文件时,客户端需要将文件数据转换为一个 Base64 编码的字符串,然后将其包含在 GraphQL 查询中。服务端需要将 Base64 解码后处理上传的文件。

以下是一个使用 Base64 编码上传文件的示例:

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

上传参数 file 声明为 String 类型。

在客户端,可以使用 FileReader 对象读取文件数据,将其转换为 Base64 编码的字符串,并将其作为 GraphQL 查询中文件参数的占位符。

以下是一个使用了 FileReader 的示例代码:

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

在服务端,需要在代码中解码 Base64 编码的文件数据,如下所示:

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

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

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

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

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

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

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

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

文件下载

在 GraphQL 中实现文件下载通常需要借助于 HTTP 响应,服务端需要将文件数据作为响应数据发送给客户端。React-Native 和 React DOM 支持使用 URL.createObjectURL() 方法将响应转化为本地 url。

以下是一个使用 GraphQL 下载文件的示例:

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

其中,查询参数 id 指定要下载的文件的 ID。

在服务端,需要通过 ID 查询文件数据,并将其作为响应数据重定向到需要下载该文件的页面。

以下是一个使用了 express 的示例代码:

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

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

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

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

在客户端,我们需要发送一个 HTTP 请求到服务端,然后使用传统的下载方式来下载文件。

以下是一个使用了 fetch 的示例代码:

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

结论

通过本文的学习,我们了解到了如何在 GraphQL 中实现文件的上传和下载功能。在上传文件时,我们需要借助于 graphql-upload 中间件来处理请求体,支持用户使用 multipart/form-data 格式进行文件上传和处理。在下载文件时,我们需要依赖于服务端的 HTTP 响应和客户端的传统下载方式。这些方法为在 GraphQL 中使用文件提供了强大的基础。

希望本文能为您在 GraphQL 开发中的文件操作提供有益的指导和启示。

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/6721c8352e7021665e08bce3