GraphQL 实现多文件上传

GraphQL 是一种查询语言，用于 API 的设计。它提供了一种更高效、更灵活的方式来描述 API 的数据。GraphQL 使得前端开发人员可以自由地指定他们需要的数据，并减少不必要的流量和查询开销。在前端，我们经常需要上传文件，如图片、音频等。GraphQL 支持上传单个文件，但在需要上传多个文件时就需要进行扩展。

前置要求

  • 了解 GraphQL 和 Apollo。

实现原理

GraphQL 不支持多文件上传，因此我们需要使用一个实用程序库来帮助我们进行处理。这里选择使用 apollo-upload-client 库，它是 Apollo Client 的扩展程序，用于支持文件上传。

安装

首先，我们需要安装 apollo-upload-client 库。使用 npm 进行安装：

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

或者使用 yarn 进行安装：

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

服务器端

在服务器端需要对 GraphQL server 进行配置以支持文件上传。下面以 Express 和 Apollo Server 为例进行配置。

安装依赖

安装以下依赖：

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

或者

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

配置

在服务器端的 GraphQL 配置文件中添加以下代码：

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

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

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

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

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

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

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

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

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

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

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

在上面的代码中，我们定义了两个 Mutation：singleUpload 和 multipleUpload。当执行 upload 操作时，通过 graphql-upload 提供的 GraphQLUpload 类型将文件添加到 GraphQL schema 中。由于文件上传可能会对应用程序的安全性产生威胁，因此我们需要在服务器端对其进行验证（例如，文件类型、大小等）。

客户端

安装

我们需要使用 apollo-upload-client 客户端库来向服务器上传文件。使用 npm 安装：

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

或者使用 yarn 进行安装：

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

配置

在客户端的 ApolloClient 中启用上传插件，并将 UploadLink 用作连接类。

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

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

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

上传文件

在 GraphQL mutation 中添加 file(name: "filename") 参数来上传一个文件。如果需要上传多个文件，则使用 [file]：

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

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

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

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

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

在上面的代码中，我们使用 useMutation hook 来定义一个 UPLOAD_FILES mutation。添加一个表单来上传文件。我们使用 FileReader 将文件读入内存，然后将其变换成 GraphQL mutation 的变量，最后将变量发送到服务器。

总结

在本篇文章中，我们介绍了如何使用 apollo-upload-client 实现 GraphQL 的多文件上传。我们提供了服务器端和客户端的完整代码示例。GraphQL 的上传操作背后的途中并不复杂，但它确实比较难以实现。使用 apollo-upload-client，我们只需要一些简单的配置和相应的库，就可以轻松地实现多文件上传。如果你想一次上传多个文件，只需要将 file 参数改成 [file]。使用本文中的代码示例可以方便地在你的项目中轻松实现文件上传功能。

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

阅读全文

猜你喜欢

  • PM2 常见问题：如何解决 PM2 启动应用程序后出现 Error: spawn ENOENT 错误

    PM2 是一个流行的 Node.js 进程管理工具，可以在后台运行应用程序，并确保它们保持活动状态，即使应用程序崩溃或服务器崩溃也可以自动重启应用程序。但是，当您使用 PM2 启动应用程序时，可能会遇...

    1 年前
  • 如何在 Svelte 应用程序中使用 LESS？

    LESS 是一种 CSS 预处理器，它使得编写和维护 CSS 变得更加容易和高效。在 Svelte 应用中使用 LESS 可以帮助我们更好地组织和管理样式文件，同时还能提供更加丰富的样式和动画。

    1 年前
  • 响应式设计中如何实现响应式图表布局

    随着移动设备的普及，对于网站和应用的响应式设计越来越重要。图表是其中特别需要考虑的一个组件，因为它可能会占据很多空间，而在移动设备上显示可能会非常困难。在本文中，我们将详细介绍如何实现响应式图表布局，...

    1 年前
  • 如何在 Node.js 环境下使用 Babel 前置转换

    什么是 Babel？ Babel 是 JavaScript 代码转换器，它能将 ECMAScript 2015+ 的代码转换为向后兼容的版本。这意味着我们可以在现代化的 JavaScript 中使用最...

    1 年前
  • Hapi.js 实现 Session 会话机制 - 解决 cookie 跨域问题

    在 Web 开发中，Session 会话机制是非常重要的一个概念。通过 Session，我们可以跨请求存储数据，实现用户登录状态的持久化。然而，由于客户端限制，Session 机制往往需要依赖于 co...

    1 年前
  • 在于 ES10 中正确的使用 ES6 模块的导入 / 导出

    在前端开发中，JavaScript 模块化是必不可少的一环。ES6 的导入 / 导出语法为 JavaScript 模块化提供了新的解决方案，而在 ES10 中，这种语法得到了进一步的完善。

    1 年前
  • ES6 中的 Module 模块规范解析

    一、概述 在前端开发中，模块化是一种重要的开发模式。这种模式将一个程序分解成多个模块，每个模块完成不同的功能，从而使整个程序变得简洁、易于维护和扩展。在 ES6 中，模块化也成为了标准的一部分，它采用...

    1 年前
  • 基于 Koa2 实现权限管理的方式

    前言 Web 应用程序的安全性和可靠性是应用程序开发的关键点。在 Web 应用程序中，有许多的功能和资源，需要通过权限管理来控制。 本文将介绍如何使用 Koa2 实现权限管理，同时给出了详细步骤和示例...

    1 年前
  • 基于 Vue.js SPA 架构开发：解决页面刷新导致的状态丢失

    背景 单页应用 (Single Page Application, SPA) 是当今前端开发中最流行的开发方式之一，通过使用前端框架如 Vue.js 实现了现代化的用户体验，允许用户在不刷新整个页面的...

    1 年前
  • MongoDB-- 索引查询过慢

    MongoDB-- 索引查询过慢 在日常开发中，使用 MongoDB 进行数据存储的开发者可能会遇到索引查询过慢的问题。本文将针对该问题进行详细探讨，并提供解决该问题的有效方案。

    1 年前
  • 如何利用 Custom Elements 实现无限滚动日历

    日历是我们日常生活中必不可少的工具之一，而随着 web 技术的发展，实现一个漂亮的日历已经不再困难。本文将详细介绍如何利用 Custom Elements 实现无限滚动日历，并提供示例代码和指导意义。

    1 年前
  • 如何使用 Socket.io 实现多人实时协作编辑器

    在实际的项目中，多人实时协作编辑器是非常常见的功能，它可以让多个人同时编辑同一份文档，大大提高了团队合作的效率。而实现多人实时协作编辑器，需要用到 Socket.io 技术。

    1 年前
  • 使用 Mocha 和 Supertest 进行 REST API 测试

    引言 REST API（Representational State Transfer Application Programming Interface）是一种基于标准 HTTP 协议的 Web S...

    1 年前
  • PWA 开发中使用 Redux 进行状态管理的最佳实践

    在现代的 Web 应用中，状态管理是一项很重要的任务，它可以让我们实现更好的用户体验和功能。在开发 PWA (Progressive Web App) 的过程中，我们需要对应用程序状态进行管理，以便在...

    1 年前
  • Redis 的数据持久化问题解析

    Redis 的数据持久化问题解析 Redis 是一款使用内存作为数据存储的 NoSQL 数据库，相对于传统的磁盘存储方式，Redis 提供了更高的访问速度和更低的延迟。

    1 年前
  • 使用 Enzyme 测试 React 组件中的多个事件

    Enzyme 是 React 的一款测试工具，它可以方便地模拟组件的渲染过程，以便我们进行有效的测试。本文将介绍如何使用 Enzyme 来测试 React 组件中的多个事件，包括事件绑定、触发、数据验...

    1 年前
  • 如何使用 CSS Grid 实现卡片堆叠布局

    什么是卡片堆叠布局 卡片堆叠布局是一种常见的 UI 设计方式，通常用于轮播图、新闻列表等场景中。它的主要特点是一次只显示一张卡片，以层叠的方式展示。当用户进行操作（如翻页）时，当前卡片消失，下一张卡片...

    1 年前
  • Web Components 与 Webpack 整合的最佳实践解读

    前言 Web Components 是一种新型的前端技术，它可以让我们方便地创建可复用的自定义 HTML 元素。然而，由于 Web Components 的标准尚未被所有主流浏览器广泛支持，我们需要使...

    1 年前
  • 如何使用 SASS 实现雪碧图

    如何使用 SASS 实现雪碧图 随着 Web 前端的快速发展，Web 页面的复杂度也在不断提高。为了提高页面的速度和加载效率，我们通常需要将多张小图标合并成一张大图，这就是雪碧图（Sprite）。

    1 年前
  • 如何在 TypeScript 中使用 React

    React 是一个流行的用于构建用户界面的 JavaScript 库。TypeScript 是一种强类型的 JavaScript 超集语言，它增加了类型检查和静态类型分析的优势。

    1 年前

相关推荐

    暂无文章