npm 包 apollo-upload-client 使用教程

简介

apollo-upload-client 是一个用于GraphQL请求中上传文件的客户端 JavaScript 库，官方提供了 React 和 Angular 的封装。

使用 apollo-upload-client，可以方便地将文件上传到服务器，并且支持多文件上传，同时还支持进度条显示以及上传取消等功能。

安装

使用 npm 安装 apollo-upload-client：

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

使用

1. 创建 ApolloClient

在创建 ApolloClient 实例时，需要添加一个 uploadLink 作为链接，该链接将用于上传文件。

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

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

2. 定义 GraphQL 请求

在使用 apollo-upload-client 上传文件时，GraphQL 服务器需要使用 GraphQLUpload 等插件才能支持文件上传。

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

3. 创建文件上传组件

我们可以创建一个用于文件上传的 React 组件，其中使用 react-dropzone 库来支持拖放上传和多文件上传。

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

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

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

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

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

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

进度条显示和上传取消

apollo-upload-client 还提供了一个 createUploadLink 方法创建链接时传入 onProgress 参数来获取上传进度信息。

如下所示，在 onProgress 中更新进度条的状态，并保存 controller，以便在上传取消时取消上传。

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

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

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

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

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

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

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

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

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

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

总结

本文介绍了如何使用 npm 包 apollo-upload-client 在 GraphQL 请求中上传文件，并演示了如何使用官方的 React 封装。在实现多文件上传时，我们使用了 react-dropzone 库来支持拖放上传和多文件上传，同时还提供了进度条显示和上传取消等功能，这可以为用户提供更好的体验。

在使用 apollo-upload-client 时，需要注意服务器需要使用 GraphQLUpload 等插件来支持文件上传，同时也需要注意在上传前添加相应的请求头信息。

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

阅读全文

猜你喜欢

  • npm 包 @types/webpack-merge 使用教程

    在前端项目中，使用 Webpack 来打包和构建项目已经成为一种主流。而在 Webpack 的配置中，使用 webpack-merge 来合并配置也越来越受到重视。

    5 年前
  • npm 包 @types/memory-fs 使用教程

    随着前端技术的不断发展，越来越多的项目需要涉及到文件系统的操作。在 Node.js 中，文件系统操作是很常见的。然而在前端中，要进行文件系统操作则需要使用到一些特殊的工具库。

    5 年前
  • npm 包 @types/json5 使用教程

    在前端开发中，JSON 是一个非常常见的数据格式。但是，在实际开发中，很多时候我们需要对 JSON 数据进行一些特殊处理，例如在实际应用中使用 JavaScript 的方式去解析和读取 JSON 数据...

    5 年前
  • NPM包@types/jsdom使用教程

    在前端开发中，为了使我们的代码更具有可读性和可维护性，通常会使用 TypeScript 来编写我们的代码。在 TypeScript 中，由于其强类型特性，我们需要为常用的 JavaScript 库添加...

    5 年前
  • npm 包 @types/js-yaml 使用教程

    1. 什么是 @types/js-yaml？ @types/js-yaml 是一个 npm 包，它提供了 js-yaml 的 TypeScript 类型定义。如果您在使用 TypeScript 进行前...

    5 年前
  • NPM 包 component-inherit 使用教程

    在前端开发中，有很多时候我们需要继承一个组件，即让一个组件继承另一个组件的属性和方法。这时候，我们可以使用 npm 包 component-inherit。下面，我将为大家介绍该 npm 包的使用方法...

    5 年前
  • npm 包 @holytiny/wxmp-engine.io-parser 使用教程

    简介 @holytiny/wxmp-engine.io-parser 是一个兼容小程序平台的 engine.io 协议解析器。它可以用于实现小程序实时通信能力，例如聊天应用。

    5 年前
  • npm 包 @types/react-dom 使用教程

    前言 在使用 React 开发前端项目的时候，会用到一些常用的库和工具，比如 react 和 react-dom 等。这些库都是通过 npm 进行安装和管理的。在使用这些库的时候，我们经常需要使用到它...

    5 年前
  • npm 包 @types/react 使用教程

    什么是 @types/react 在使用 TypeScript 开发 React 应用的过程中，由于 React 并没有提供完整的类型定义文件，我们就需要依赖 @types/react 这个 npm ...

    5 年前
  • npm 包 @svgr/rollup 使用教程

    背景 SVG 是一种矢量图形标准，它的优点就是可以在任意尺寸下无失真，而缺点则是难以编辑和交互。由于在前端中，尤其是在 React 应用中使用 SVG 的需求量越来越大，因此产生了一些 SVG 编辑器...

    5 年前
  • npm 包 @types/rc-slider 使用教程

    在前端开发中，经常会使用到一些滑块组件来实现数据的选择。其中，rc-slider 是一个简单易用的滑块组件，它的优点在于支持多种类型的滑块，例如单选、多选、连续、不连续等等。

    5 年前
  • npm 包 @babel/plugin-proposal-private-methods 使用教程

    在 JavaScript 的面向对象编程中，私有方法是类中的一种隐藏的方法，只能在类内部调用，而外部无法访问。这种方法可以有效保护类中的属性和方法不被外部随意修改和调用。

    5 年前
  • npm 包 rc-pagination 使用教程

    什么是 rc-pagination？ rc-pagination 是一个用于分页的 React 组件库，它有着简单易用、灵活多样等特点，目前在 npm 上的下载量已经超过了 200 万次。

    5 年前
  • npm 包 @babel/runtime-corejs3 使用教程

    随着前端代码越来越复杂，我们需要使用各种工具和技术来提高代码的可维护性和可读性。其中，使用 Babel 来将 ES6 以上的代码转换为 ES5 是必不可少的一环。但是，由于 Babel 自身的一些限制...

    5 年前
  • npm 包 rc-notification 使用教程

    在前端开发中，我们经常需要使用弹窗通知等功能。而 rc-notification 是一个非常好用的 npm 包，可自定义通知信息、位置、时长等。本文将详细介绍 rc-notification 的使用方...

    5 年前
  • npm 包 @babel/preset-typescript 使用教程

    在前端开发中，TypeScript 已经成为越来越受欢迎的语言。但是，在使用 TypeScript 编写代码并将其转换为 JavaScript 时，我们需要使用一些工具帮助我们处理类型检查和语法转换。

    5 年前
  • npm 包 rc-progress 使用教程

    前言：rc-progress 是一个使用 React 实现的进度条组件。在前端开发中，进度条是非常常用的一种 UI 控件。由于 rc-progress 组件易于安装和使用，并且 API 文档详细，深受...

    5 年前
  • npm 包 @types/supports-color 使用教程

    如果你是一个前端开发者，你肯定会发现在开发中经常需要使用控制台输出日志信息，而有时候我们需要使用不同的颜色输出信息来区分不同的信息类型，这时候就需要用到 控制台颜色输出 库了。

    5 年前
  • npm 包 @octokit/webhooks 使用教程

    简介 @octokit/webhooks 是一种 GitHub Webhooks 的 Node.js 实现。GitHub Webhooks 就是在特定事件发生时，GitHub 会向指定的 URL 发送...

    5 年前
  • npm 包 @octokit/request 使用教程

    什么是 @octokit/request？ @octokit/request 是 GitHub 官方维护的 npm 包，可以方便地通过 Node.js 向 GitHub API 发送请求。

    5 年前

相关推荐

    暂无文章