如何在 GraphQL 中处理上传文件的请求

面试官：小伙子，你的代码为什么这么丝滑？

GraphQL与REST相比，在处理文件上传方面具有很大优势。GraphQL通过Multipart请求处理文件上传，可以上传多个文件，并且可以为每个文件添加元数据。这意味着对于那些需要处理大量文件的应用程序，GraphQL可以更好地满足需求。

如何在GraphQL中处理文件上传呢？接下来我们将逐步介绍。

在Schema中定义类型

首先，我们需要在Schema中定义类型来接受文件上传。在这个例子中，我们创建了一个名为 File 的类型。

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

在定义类型的时候，我们需要确定三个属性：filename、mimetype和encoding。这些属性用于跟踪文件的元数据。

使用GraphQL Upload库来处理文件上传

一般来说，我们使用GraphQL Upload库来处理文件上传。首先我们需要安装它：

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

然后，在项目中使用它：

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

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

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

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

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

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

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

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

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

在上传文件时，需要将文件作为参数传递给 uploadFilemutation。

完成文件上传后，我们可以像往常一样处理上传的流，比如将文件储存在云存储OSS中。这是一种简单而灵活的解决方案。

处理多文件上传

我们已经成功地上传了一个文件，也可以上传多个文件。我们将 uploadFile 变成 uploadFiles 并将其参数类型更改为 file： [Upload]。

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

我们还需要修改 uploadFilesmutation的resolver函数，以便它能处理上传的多个文件：

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

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

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

现在，我们可以在一个文件数组中上传多个文件。

结论

在GraphQL中处理文件上传看似复杂，但实际上非常简单。使用GraphQL Upload库我们可以轻松地处理文件上传，包括单个文件和多个文件。

本文提到了用一些示例代码演示了在GraphQL中处理文件上传的方式，你可以将其运用到实际开发中，从而更好的实现你的业务场景。

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

阅读全文

猜你喜欢

  • 在 React Native 中使用 Redux 构建电商应用

    React Native 是一个跨平台的框架，可以同时为 iOS 和 Android 创建本机应用。Redux 是一个流行的状态管理库，它可以更好地处理数据流，并简化代码的管理。

    17 天前
  • 在 Web 应用程序中使用 Fastify 和 GraphQL

    在 Web 应用程序中使用 Fastify 和 GraphQL Fastify 是一个快速和低开销的 Node.js web 框架，非常适合构建高性能的 Web 应用程序。

    17 天前
  • 如何在 React 中使用异步函数以及 ES2020 异步函数的优化

    如何在 React 中使用异步函数以及 ES2020 异步函数的优化 前言 在现代前端开发中，异步编程是不可避免的一个主题。React 作为当今最流行的前端框架，对于异步编程的支持也非常友好，同时 E...

    17 天前
  • 如何使用 ESLint 在 Express 项目中检查代码规范

    ESLint 是一个 JavaScript 代码检查工具，它可以帮助开发者在编写代码时检查常见的代码错误、保持代码风格的一致性、避免常见的安全问题等。在一个大型的 Express 项目中使用 ESLi...

    17 天前
  • 如何在 Express.js 应用程序中使用 HTTPS 进行保护？

    在当今的互联网世界中，安全性成为了任何应用程序开发的核心要素。其中，HTTPS 协议可以提供一定的安全机制，以防止敏感数据泄露、防止数据被窃取、篡改等。 在本文中，我们将探讨如何在 Express.j...

    17 天前
  • 如何使用 ECMAScript 2019 的 nullish 合并运算符来避免undefined or null类型的错误

    引言 在编写 JavaScript 代码时可能会遇到undefined or null类型的错误，这些错误经常在代码执行期间导致程序停止运行。ECMAScript 2019 引入了nullish合并运...

    17 天前
  • Sequelize: 使用 Sequelize 模块连接数据库

    介绍 Sequelize 是一种 Node.js 的 ORM(Object-Relational Mapping) 框架，可以轻松地在未使用 SQL 语句的情况下与代码中的数据库进行交互。

    17 天前
  • Docker-compose 常见错误及解决方案

    Docker-compose 是一种将多个 Docker 容器组合成一组服务的工具，可以透明地连接多个 Docker 容器，让开发者轻松创建，并在任意环境中运行本地服务。

    17 天前
  • Vue.js SPA 应用 SEO 改善范例

    Vue.js SPA 应用 SEO 改善范例 随着互联网的快速发展，网站变得越来越复杂和功能化，单页应用程序（Single Page Application, SPA）逐渐成为了一种流行的前端框架。

    17 天前
  • Babel 编译 React Native 遇到的常见问题及解决方法

    React Native 是一种用于构建跨平台移动应用程序的框架。它使用 JavaScript 语言，配合其强大的组件化架构，使得开发者可以更快、更简单地创建高质量的移动应用程序。

    17 天前
  • PM2 和 Node.js 的错误处理和日志记录最佳实践

    介绍 PM2 是 Node.js 应用程序进程管理器，它可以帮助我们启动，停止，重启和监控 Node.js 应用程序。当我们的 Node.js 应用出现错误或者崩溃时，我们需要及时地捕捉和记录错误，以...

    17 天前
  • 在使用 Enzyme 进行 React 组件测试时如何使用 cypress-axe 进行无障碍测试

    在开发 Web 应用程序时，我们需要确保应用程序足够可访问和无障碍。这不仅是遵守法规和标准的要求，同时也可以帮助您的应用程序更好地服务于您的用户，无论他们的身体状况如何。

    17 天前
  • 如何在 Headless CMS 中设置数据的自动备份

    前言 Headless CMS 是一种将内容管理系统 (CMS) 与前端或后端内容分离的方式，使开发者可以自由选择他们自己喜欢的技术堆栈来构建他们的网站或者移动应用。

    17 天前
  • Tailwind CSS 中常见的 stylelint 错误及解决方案

    Tailwind CSS 是一个快速的 CSS 框架，允许快速构建 Web 应用程序。然而，在使用 Tailwind CSS 的过程中，您可能会遇到一些 stylelint 错误。

    17 天前
  • 如何在 Next.js 中使用 styled-components

    简介 styled-components 可以让我们在 React 中使用 CSS in JS，它允许我们写出动态且强大的样式，同时保持组件的可重用性和可读性。在使用 Next.js 开发 React...

    17 天前
  • 如何使用 Symbol 防止对象属性被覆盖

    在 JavaScript 中，对象属性是很方便的一种数据结构。我们可以通过将值赋给属性，然后在代码中引用这些属性。然而，使用属性时，我们必须小心，以免意外地覆盖了它们。

    17 天前
  • Docker 安装后的常见问题解决方法

    Docker 是一个开源的容器化平台，让开发者可以轻松地打包、发布和运行应用程序。Docker 的出现让软件开发和部署变得更加轻松和便捷，因此以 Docker 为基础的技术越来越受到欢迎。

    17 天前
  • 如何在 React 中实现无障碍访问？

    无障碍访问 (Accessibility) 指的是通过一系列的设计和开发技术，让网站和应用程序更容易让所有用户（包括视觉、听觉、智力和身体功能受到影响的用户）使用。

    17 天前
  • 使用 Babel 编译时如何处理 ES2016 Enhance Object

    介绍 ES2016（也称为ES7）是 ECMAScript 标准的最新版本之一，它增加了许多新特性，其中之一就是 Enhance Object，也称为对象字面量扩展。

    17 天前
  • 如何使用 Serverless 实现人脸识别？

    人脸识别是一种热门的技术，它可以帮助我们快速、准确地识别面部特征，应用于许多领域，例如安全监控、人脸支付、美颜相机和智能门锁等。而在前端开发中，我们可以使用 AWS Serverless 框架来实现人...

    18 天前

相关推荐

    暂无文章