简介
apollo-upload-client 是一个用于GraphQL请求中上传文件的客户端 JavaScript 库，官方提供了 React 和 Angular 的封装。
使用 apollo-upload-client，可以方便地将文件上传到服务器，并且支持多文件上传，同时还支持进度条显示以及上传取消等功能。
安装
使用 npm 安装 apollo-upload-client：
npm install apollo-upload-client
使用
1. 创建 ApolloClient
在创建 ApolloClient 实例时，需要添加一个 uploadLink 作为链接，该链接将用于上传文件。
-- -------------------- ---- -------
------ - ------------- ------------- - ---- -----------------
------ - ---------------- - ---- -----------------------
----- ------ - --- --------------
----- ------------------
---- ----------- -- ------- -----
-------- -
-------------- ------------------------------ -- -----------
--
---
------ --- ----------------
---2. 定义 GraphQL 请求
在使用 apollo-upload-client 上传文件时，GraphQL 服务器需要使用 GraphQLUpload 等插件才能支持文件上传。
mutation UploadFile($file: Upload!) {
uploadFile(file: $file) {
url
filename
}
}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