如何在 GraphQL 中实现图片上传

GraphQL 是一种用于构建 API 的查询语言，它允许客户端明确地指定其需要的数据，从而避免了过度获取数据的问题。GraphQL 也支持上传文件，包括图片上传。在本文中，我们将介绍如何在 GraphQL 中实现图片上传，并提供详细的示例代码和建议。

前置知识

在本文中，我们假设您已经熟悉 GraphQL 和 Node.js，并且您已经安装了以下依赖项：

  • graphql-yoga（用于构建 GraphQL 服务器）
  • multer（用于处理文件上传）

如果您没有熟悉这些技术的话，请先查看一下对应的介绍和学习资料。

图片上传的实现

要在 GraphQL 中实现图片上传，您需要完成以下步骤：

1. 定义 GraphQL 输入类型

GraphQL 输入类型用于接收来自客户端的数据，在这里我们可以定义一个 Upload 类型，用于接收文件上传的数据：

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

这里的 Upload 类型包含了文件的基本信息，例如文件名、文件类型、文件大小和文件路径。

2. 定义 GraphQL 根类型

GraphQL 根类型用于定义可供客户端查询的接口，这里我们可以定义一个 Mutation 类型，用于处理文件上传：

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

这里的 uploadFile 接口用于接收客户端上传的文件，并将文件保存到服务器。我们可以在这里调用文件上传处理库来处理文件上传。

3. 处理文件上传

我们可以使用 multer 处理文件上传，multer 是一种 Node.js 中用于处理 multipart/form-data 类型数据的库。我们可以使用以下代码处理文件上传：

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

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

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

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

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

在这里，我们使用 multer 的 diskStorage 存储引擎，将文件保存在 uploads/ 目录中。文件名由上传时间戳和文件名组成。

4. 为 GraphQL 接口定义解析函数

在 GraphQL 中，我们需要为每个接口定义解析函数，处理接口请求，并返回对应的数据。在这里，我们按照定义的 Mutation 类型为接口 uploadFile 定义解析函数：

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

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

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

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

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

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

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

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

在这里，我们使用 storeUpload 方法将文件保存到服务器，并将文件路径返回给客户端。在 processUpload 中，我们解析上传的文件内容并调用 storeUpload 将文件保存到服务器。

5. 测试文件上传接口

在完成以上步骤后，您可以通过发送以下查询来测试文件上传接口：

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

这将发送文件上传请求，并返回上传文件的基本信息，包括文件名、文件类型、文件大小和文件路径。

总结

在本文中，我们介绍了如何在 GraphQL 中实现图片上传，并提供了详细的示例代码和建议。通过这些步骤，您可以在您的 GraphQL API 中支持文件上传，并为您的客户端提供更好的服务。

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

阅读全文

猜你喜欢

  • 从零开始的 Next.js 和 Redux 集成

    从零开始的 Next.js 和 Redux 集成 Next.js 是一个基于 React 的服务器端渲染框架，它可以帮助我们快速开发高性能的应用程序。而 Redux 则是一个状态管理库，用于管理复杂的...

    1 年前
  • Koa静态资源缓存策略优化

    随着Web应用程序规模的扩大，性能优化变得越来越重要。Koa是一个Node.js框架，可以帮助你在Web应用程序中优化路由和中间件，同时支持优化静态资源缓存。本文将介绍如何使用Koa实现静态资源缓存策...

    1 年前
  • ES6 let 与 var 的区别

    JavaScript 作为一门动态语言，存在着很多场景下的变量定义问题。ES6 中引入了 let 关键字来解决部分问题。本文将介绍 ES6 中 let 和 var 的区别，在实际项目中如何选择使用，以...

    1 年前
  • Sequelize 中怎样实现级联删除

    Sequelize 是 Node.js 中非常流行的 ORM 框架，除了提供简单易用的 API 外，还支持多种数据库，如 MySQL, PostgreSQL 等。在使用 Sequelize 做项目开发...

    1 年前
  • 使用关系数据库查询语言转换器与 GraphQL

    在 Web 开发中，前端与后端之间的数据传输是一个非常重要的环节。之前，前端开发者通常需要通过 RESTful API 接口来获取后端数据。而 GraphQL 是最近比较流行的一种替代方案，它可以更加...

    1 年前
  • React SPA 应用中使用 Redux-saga 实现异步请求

    在 React 的单页面应用（SPA）中，数据管理是一个重要的话题。Redux 成为了 React 中状态管理的首选库，它的中间件 Redux-saga 有助于实现异步请求。

    1 年前
  • 如何在 React 中处理 AJAX 响应？

    前言 在现代 Web 应用程序中，通过 AJAX 请求获取数据变得越来越普遍。对于前端开发人员而言，如何在 React 中处理 AJAX 响应是必不可少的一项技能。

    1 年前
  • 使用 PM2 实现 Websocket 与 API 下的共存

    在现代化的 Web 应用中，Websocket 已经成为了一种非常重要的通信方式，可以用来实时地传送数据。然而，仅仅使用 Websocket 还不够，我们还需要支持常规的 API 请求。

    1 年前
  • Drupal 和 Strapi 的 Headless CMS 构建技术比较

    在 Web 开发中，Content Management System (CMS) 扮演了至关重要的角色，因为它能够让网站管理员和内容编辑发布和维护内容。但是传统的 CMS 往往包含了太多的前端代码，...

    1 年前
  • Sass 与 PostCSS 比较及其应用技巧

    前端开发中，样式处理一直是一个不可或缺的部分。随着项目的复杂度提高，CSS 难以满足我们的需求，Sass 和 PostCSS 出现了。 Sass 是一款用 Ruby 编写的 CSS 预处理器，提供了一...

    1 年前
  • Mongoose 使用 pop() 方法时遇到的问题及解决方法

    在 Mongoose 操作数据库时，经常需要使用到数组类型的字段。对于数组类型的字段，Mongoose 提供了很多方法来进行操作。其中，pop() 方法是用来删除数组的最后一个元素的。

    1 年前
  • ES10 新增函数：Array.flat()、Array.flatMap() 总结

    JavaScript 作为一门语言，发展迅速，变动也十分频繁。作为前端开发者，掌握新特性是我们必须学习的一项技能。在 ES2019 中，新增了两个数组函数：Array.flat() 和 Array.f...

    1 年前
  • ES8 Reduce 循环过程及实例讲解

    在前端开发中，我们经常需要对数组进行遍历或者对其进行累加或者合并操作。此时，reduce 函数是一个非常实用的函数。ES8 中，reduce 函数也有了一些新的用法，本文将详细介绍 ES8 Reduc...

    1 年前
  • RxJS 实践：如何翻译 HTTP Response

    前言 在进行前端开发时，经常需要从远程服务器获取数据，并将其展示在页面上。而在这个过程中，我们经常会遇到需要进行错误信息的处理，例如：网络错误、服务错误等。对于这种情况，我们通常需要根据服务器返回的 ...

    1 年前
  • Enzyme 如何测试 React Hooks

    Enzyme 如何测试 React Hooks React Hooks 是 React16.8.0 版本引入的新特性。它提供了一种新的方式来处理组件的状态和生命周期。

    1 年前
  • 详解 ES9 中新增的 for-await-of 循环

    随着 JavaScript 语言的发展，ES9 新增了一个重要的特性 - for-await-of 循环。它可以极大地简化异步操作的处理流程，提高代码的可读性和可维护性。

    1 年前
  • 使用 Express.js 进行 HTTP 请求验证的步骤

    在前端开发中，很多时候我们需要对传入的 HTTP 请求进行验证，以确保数据的完整性和安全性。这时候可以使用 Express.js 框架来方便地进行 HTTP 请求的验证。

    1 年前
  • 使用 Mocha 测试时间相关函数的技巧

    前言 在前端开发时，我们经常会涉及时间相关的计算。而涉及时间的计算就需要考虑到一系列的情况，如时区、夏令时等等。为了保证时间计算的正确性和稳定性，在开发中我们需要使用测试工具对这些函数进行测试。

    1 年前
  • 如何将 Tailwind 与 React 集成

    Tailwind 是一款流行的 CSS 工具库，它提供了一系列的预定义 CSS 类，可以帮助我们快速构建样式。React 是一款常用的前端框架，它能够帮助我们构建复杂的单页面应用。

    1 年前
  • 使用 React 和 Redux 进行数据可视化

    使用 React 和 Redux 进行数据可视化 在现代应用开发中，数据可视化已经成为越来越重要的一环。数据可视化能够帮助开发者更好地了解数据，并帮助用户更好地处理和分析数据。

    1 年前

相关推荐

    暂无文章