前言
随着网络技术的不断发展，前端同学对于文件上传的需求也越来越高，而使用传统的表单方法进行文件上传也已经逐渐过时。在 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