GraphQL 中的文件上传实现

GraphQL 是一种新型的 API 查询语言，它可以为 Web 应用程序提供更加精细、专注的数据查询能力。在 GraphQL 中，我们可以使用类似于 RESTful API 的方式获取或修改数据，但是 GraphQL 更加灵活、可扩展、类型安全和高效。

在实际的 Web 开发中，我们通常需要上传一些文件，例如图片、视频、音频等。而 GraphQL 的标准规范并没有提供文件上传的官方方法。本文将介绍一种在 GraphQL 中实现文件上传的方法，并提供一个基于 Node.js 和 Apollo Server 的示例代码。

实现方法

在 GraphQL 中实现文件上传的方法有很多种，例如使用 base64 编码、使用 FormData、使用 Multipart 等。这里我们选择使用 Multipart。

Multipart 是一种常见的 HTTP 请求体格式，通常用于上传文件、表单等数据。它的基本格式如下：

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

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

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

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

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

其中，boundary 是一个随机生成的字符串，用于标示内容的边界；每个字段都用 Content-Disposition 首部指定名称，文件名和字段类型；文件的内容则放在 Content-Type 首部指定的媒体类型的数据块中。

在 GraphQL 中，我们可以定义一个 Upload 标量类型，用于表示上传的文件。对于文件的传输，我们可以在 GraphQL Schema 中定义一个 Mutation 类型，并提供一个参数类型为 Upload 的字段，用于接收前端传递的 Multipart 请求。在后端实现中，我们可以使用一些现有的 Node.js 模块，例如 multer、formidable、busboy 等，来解析 Multipart 请求并将文件存储到服务器上。

下面是一个基于 Node.js 和 Apollo Server 的示例代码，用于实现 GraphQL 中的文件上传功能：

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

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

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

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

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

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

本例中使用的是 formidable 模块来解析 Multipart 请求，并使用 createReadStream 和 createWriteStream 方法来读取和写入文件内容。上传的文件会被保存到项目根目录下的 uploads 文件夹中，并以 uuid 和文件名的组合命名。

使用方法

在前端使用 GraphQL 来上传文件时，我们需要将文件内容转换成 Multipart 格式，并将请求发送到后端的 GraphQL API。下面是使用 fetch 函数的示例代码：

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

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

在上面的代码中，首先创建了一个包含 GraphQL 查询和变量的对象 operations，并通过 map 对象指定哪些变量对应哪些文件。然后将文件内容添加到 FormData 中，并使用 fetch 发送一个 POST 请求到 GraphQL API。最后解析响应，获取上传成功后的文件路径。

总结

本文介绍了如何在 GraphQL 中实现文件上传的方法，并提供了一个基于 Node.js 和 Apollo Server 的示例代码。通过本文的学习，我们可以掌握在 GraphQL 中处理 Multipart 请求和文件上传的技能，在实践中更好地应用 GraphQL 技术，为 Web 应用带来更加灵活、高效、安全的数据管理能力。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/652d088b7d4982a6ebe859bd

阅读全文

猜你喜欢

  • Web Components 状态管理：实现 Flux 架构

    前端在各种应用场景下都扮演着越来越重要的角色，而面对日益复杂的页面交互和状态管理，设计模式也愈发显得必要和重要。本文将介绍如何使用 Web Components 实现 Flux 架构，解决前端应用中的...

    1 年前
  • 如何使用 Fastify 和 NodeMailer 实现邮件通知功能

    邮件通知功能在现今的应用开发中越来越常见。例如，当应用程序发生故障或者某些关键操作成功执行时，就可以通过发出一封邮件通知管理员或者用户。这篇文章主要介绍如何使用 Fastify 和 NodeMaile...

    1 年前
  • Docker 容器中安装 Node.js 的方法

    在前端开发中，Node.js 是一个非常流行的应用程序平台。使用 Docker 来容器化你的 Node.js 应用程序可以让它们更加可靠和可重现，并简化了集成、分发和部署过程。

    1 年前
  • ECMAScript 2018 (ES9) 中的新特性之异步函数

    在 JavaScript 中，异步编程是非常常见和重要的。在过去，我们经常使用回调函数来实现异步代码，但这也会造成回调地狱。而异步函数是为了解决这个问题而被引入到 ECMAScript 2018 (E...

    1 年前
  • 如何使用 LESS 实现翻转效果

    LESS 是一种 CSS 预处理器，也是前端领域内比较常用的一种工具。利用 LESS，你可以在写 CSS 时更加高效和方便。但是，LESS 的使用并不像 CSS 那么简单，需要一些时间和学习。

    1 年前
  • AngularJS: $scope 和 $rootScope 的区别

    在AngularJS中，$scope和$rootScope是两个最基本的概念。它们都是作用域(scope)对象，但是它们有一些重要的区别。 $scope $scope是当前controller所拥有的...

    1 年前
  • 从理解 React-Redux 的不同之处，初步解读 Flux 和 Redux 的区别

    React-Redux 是一种用于构建基于 React 的 web 应用程序的库。它是 Redux 状态管理库的一个封装，帮助开发者更容易地使用 Redux。在了解 React-Redux 之前，我们...

    1 年前
  • 使用CSS Grid实现响应式照片墙布局

    前言 照片墙是一个常见的设计元素，它可以有效地展示大量图片，并为网页带来更多视觉表现力。对于前端开发者而言，如何通过一种简单而有弹性的方式来构建照片墙是一个值得研究的问题。

    1 年前
  • Flexbox 实现分段布局

    介绍 Flexbox 是一种用于布局的 CSS3 模块，它可以有效地解决页面布局方面的问题。使用 Flexbox ，你可以轻松地构建各种类型的布局和样式。本文将介绍如何使用 Flexbox 实现分段布...

    1 年前
  • Next.js 中如何使用 hooks API 来处理组件内部的逻辑？

    在 Next.js 中，我们经常需要在组件中处理业务逻辑。Hooks API 是 React 提供的一种新的方式，可以帮助我们更容易地编写可复用和可测试的逻辑，并可以在不编写类组件的情况下使用它们。

    1 年前
  • Angular SPA 应用中的文件上传实现方法

    在许多web应用程序中，文件上传是一个必要的功能。近年来Angular作为一种主流JavaScript框架，在前端开发中得到了广泛应用. 本文将探讨如何在Angular单页应用（Single Page...

    1 年前
  • Kubernetes 集群中更换 CNI 插件的方法

    在使用 Kubernetes 进行容器编排时，CNI（Container Network Interface）插件是必不可少的。CNI 插件可以让容器在集群内互相通信，并且可以访问外部网络资源。

    1 年前
  • SASS 变量在 "@media" 嵌套中不起作用的解决方法

    当我们使用 SASS 编写前端样式时，通常会使用变量来提高代码的可维护性和重用性。然而，在 "@media" 嵌套中使用变量时，我们可能会遇到无法正常工作的情况。本文将为大家介绍如何解决这个问题。

    1 年前
  • Serverless 远程调试指南

    简介 Serverless 架构在前端领域逐渐被广泛采用，但是在调试时很容易遇到难题。本文将介绍如何使用远程调试（Remote Debugging）工具来解决 Serverless 调试问题，并提供详...

    1 年前
  • Sequelize ORM 实践攻略：如何避免 "SequelizeConnectionError" 错误？

    前言 在前端开发中，使用ORM（Object-Relational Mapping，对象关系映射）框架操作数据库是非常常见的。Sequelize是Node.js环境下一个优秀的ORM库，支持多种数据库...

    1 年前
  • Fastify 如何使用 Axios 实现 HTTP 请求的封装

    在前端开发中，经常需要使用 HTTP 请求来获取服务器端数据。为了提高代码可读性和可维护性，我们通常会对这些请求进行封装。本文将讲述如何使用 Fastify 和 Axios 实现 HTTP 请求的封装...

    1 年前
  • 使用 LESS 掌握响应式设计的方法

    响应式设计已经成为现代网站开发中的重要技术之一，它使得网站能够适应不同尺寸屏幕设备。而使用 LESS 预处理器可以让我们更加高效地编写响应式 CSS 样式。在这篇文章中，我们将介绍如何使用 LESS ...

    1 年前
  • ESLint 如何解决 no-console 报错

    问题描述 在前端开发中，我们经常会使用 console.log() 来输出调试信息。但是，有时候在代码编写完成后，我们可能会忘记把调试信息删除掉，这就导致了一个问题：生产环境下的代码也会出现调试语句，...

    1 年前
  • ES6 中的默认导出和命名导出详解

    在 ES6 中，我们可以使用默认导出（default export）和命名导出（named exports）两种方式将模块进行导出。这两种方式都非常方便，但是在具体使用时需要注意它们的差异。

    1 年前
  • Mocha 测试套件的多种语言版本之间有何区别？

    Mocha 是一个广泛使用的 JavaScript 测试框架，但它也是跨语言测试框架中的一员。除了 JavaScript 版本之外，Mocha 还有其他几种不同语言版本，包括 Python、Ruby ...

    1 年前

相关推荐

    暂无文章