npm 包 gullitmiranda-apollo-upload-client 使用教程

阅读时长 6 分钟读完

前言

随着网络技术的不断发展,前端同学对于文件上传的需求也越来越高,而使用传统的表单方法进行文件上传也已经逐渐过时。在 React 生态系统中,相信大家都知道 Apollo 这个库,它是一个 GraphQL 客户端工具集,提供了 Reactive 数据架构、缓存处理、查询构建等强大的功能。本文就要为大家介绍一个基于 Apollo 的文件上传工具——gullitmiranda-apollo-upload-client。

安装

首先,我们需要将此工具安装到我们的项目中。可以使用 npm/yarn 来安装:

使用方式

安装完成后,我们就可以在项目中引入它:

那么,接下来就是使用的方法了。

第一步:创建 HttpLink

创建 HttpLink 步骤与一般使用 Apollo Client 所示例化的方法一样:

第二步:创建 Apollo Client

第三步:创建 UploadLink

注意:此处 createUploadLink() 函数默认将文件上传处理的模式设置为 "single"。

第四步:创建 Apollo Client

示例代码

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

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

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

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

配置选项

模式设置

通过设置 "single" 或 "multiple" 两种上传模式,来指定上传器可以上传几个文件。如果没有指定,它默认为 "single"。

自定义 Headers

如果你需要为请求头部添加自定义的 Headers,你可以使用 "headers" 属性,通过函数或者常规对象来添加。

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

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

自定义文件字段名称

使用者可以通过 "fieldName" 属性对请求中的文件字段名称进行自定义设置。如果你不设置,将默认为 "file"。

自定义文件类型

如果需要精确控制上传文件的 MIME 类型(例如,当解决浏览器黑名单的情况时),你可以使用 "getFileType" 属性自定义设置。

自定义上传中间件

我们可以通过 createUploadLink 方法下的 HttpLink 函数,来创建我们的自定义上传中间件。

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

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

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

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

结论

本文为大家介绍了在基于 Apollo 的 GraphQL 客户端中,如何使用 npm 包 gullitmiranda-apollo-upload-client 来进行文件上传。通过本文提供的使用方式、示例代码以及配置选项,希望可以帮助更多的同学们在实际开发中更便捷地实现此功能。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60055f1581e8991b448dca94

纠错
反馈