前言
在前端开发中，我们通常需要实现上传用户的图片、音频和视频等文件到后端接口，以供后端对其进行处理。在这个过程中，我们需要使用到一些工具来帮助我们实现上传功能。而 apollo-upload-network-interface-alt 是一个非常好用的 npm 包，可以很方便地完成上传功能。
安装
安装该包的命令为：
npm install apollo-upload-network-interface-alt
或者是使用 yarn 安装：
yarn add apollo-upload-network-interface-alt
使用
创建上传对象
使用 apollo-upload-network-interface-alt 的关键是创建一个上传对象，并将其传递给 GraphQLClient。
import createNetworkInterface from 'apollo-upload-network-interface-alt';
const networkInterface = createNetworkInterface({
uri: 'http://localhost:3000/graphql'
});其中，uri 是您 GraphQL API 的 URI。
添加文件
添加一个文件非常简单，只需调用 addFormDataFile 函数并将一个 FormData 文件传递给它即可。
const formData = new FormData();
formData.append('file', file);
networkInterface.addFormDataFile({
formData,
});创建查询
若要使用网络接口进行查询并附带文件，请使用 apolloClient.query（）或 apolloClient.mutate（）。
-- -------------------- ---- -------
------ ------------ ---- ----------------
----- ------------ - --- --------------
-----------------
---
----- -------- - ----
-------- ------- -------- -
---------- ------ ------ -
--
-
-
--
----- --------- - -
----- ----
-
---------------------
---------
----------
------ -- ---------- ------ ---
--其中，'file' 为您在上一步中添加的 FormData 文件的键名。
完整使用示例
下面是完整的使用示例：
-- -------------------- ---- -------
------ ------------- - --- - ---- ----------------
------ ---------------------- ---- --------------------------------------
----- ---------------- - ------------------------
---- --------------------------------
---
----- ------------ - --- --------------
-----------------
---
----- ---------- - ----- ------ -- -
----- -------- - --- -----------
----------------------- ------
----- -------- - ----
-------- ------- -------- -
---------- ------ ------ -
--
-
-
--
----- --------- - -
----- ----
-
----- ------- - -
----------
------ -- ---------- ------ ---
-
----- ------ - ----- --------------------- --------- ---------- ---
------ --------------------------
-
----- ---- - --- ----------------- --------------- - ----- ------------ ---
----- ------ - ----- -----------------
--------------------结语
通过 apollo-upload-network-interface-alt，我们可以很方便地完成前端上传功能的实现。如果您还没有使用过该 npm 包，强烈建议您尝试一下。它可以让您的开发更加高效，并让您的用户体验得到极大的提升。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ab181e8991b448d845d