在前端开发中，我们常常需要处理文件上传的功能，如上传文件到服务器、剪贴板粘贴、拖拽等。而在处理上传功能中，我们需要将上传的文件抽取出来，并以合适的方式进行处理。extract-files 就是一款 npm 包，可以从 FormData、GraphQL 上传文件中提取文件信息，并返回一组文件和新 FormData，以便方便上传到服务器。本文将向您介绍如何使用 extract-files 进行文件处理。
安装
使用 npm 安装 extract-files：
--- ------- ------------- ------
入门使用
首先，引用 extract-files：
------ - ---------------- - ---- ----- ------ - ------------ - ---- ---------------- ----- ------ - -------------------------------- ----- - ------ -------- - - ----- -------------- ----------- --- ---- -- -- -------- ------------------- ----------------------
可以看到，代码中引用了 Node.js 内置模块 fs，用于读取文件流；并在 extractFiles 中传递了一个空的 operations 对象和一个空的 map 对象，接受返回的文件列表和新 FormData。
详细教程
接下来，让我们详细了解 extract-files 的参数和使用方法。
参数
operations：GraphQL 操作，通常为一个 GQL 查询或一个 GQL 变更。官方文档中给出的解释如下：如果“请求是一个 GraphQL 操作（即详细查询或变更），则这是该操作”。该参数与 GQL 的约定紧密相关，通常作为 GQL 上传文件时的流程指导。
map：用于映射传入形式的文件，在 GraphQL 中表达为上传对象。官方文档中给出的解释如下：“文件的参数名映射到文件载荷的可变位置。这些参数名将包含文件的映射的名称和路径。映射的右侧是五元组：[variablesPath，path，operationName，fieldName，index]，其中 variablesPath 是对存储已定义变量的 JavaScript 对象的引用，变量是一个键。path 的格式是查询或变更操作部署的字符串表示形式，operationName 是操作的字符串名称，fieldName 是包含文件的字段名称，index 是多个文件字段的顺序编号（从零开始）”。
options：其它参数。
示例
接下来，我们将结合示例讲解 extract-files 的进阶使用方法。
------ - ---------------- - ---- -----
------ - ------------ - ---- ----------------
----- -------- -------------------- -
----- ------ - --------------------------------
----- - ------ -------- - - ----- -------------
-
----------- --------- ------- ------- -
----------------- - ----- ----- -- -
--
--------
-----------
-
---
---- -
----- -------------------
--
--
------
--
----- --- - ------------------------------------------
----- ------- - -
-- -----------
--------------- ----------------------
-- --------
--
----- ------- - -
------- -------
--------
----- ---------
--
----- -------- - ----- ---------- ---------
----- ---- - ----- ----------------
------------------
-
---------------------在上面的代码中，我们创建了一个上传文件到服务器的例子。其中，operations 是一个 GraphQL 变更，用于创建文件；map 对象将 variables.file 映射到请求中的上传文件；在请求时，通过 fetch 方法传入，其中以新的 formData 作为请求参数，从而完成文件上传。
同时，您还可以通过配置选项 useFormikContext(自 10.0.0 版本) 为true，使用 Formik 执行 context 获取。同时，在变量名中，使用“.”框架表达式；最后通过返回使用 useFormikContext` 的 hook。
------ - ---------------- - ---- -----
------ - ------------ - ---- ----------------
------ - ---------------- - ---- ---------
----- -------- -------------------- -
----- - ------ - - -------------------
----- - ------ -------- - - ----- -------------
-
----------- --------- ------- ------- -
----------------- - ----- ----- -- -
--
--------
-----------
-
---
---- -
----- -------------------
--
-------- -
----------------- -----
--
--
-----------
--
----- --- - ------------------------------------------
----- ------- - -
-- -----------
--------------- ----------------------
-- --------
--
----- ------- - -
------- -------
--------
----- ---------
--
----- -------- - ----- ---------- ---------
----- ---- - ----- ----------------
------------------
-
---------------------虽然以上示例比较简单，但您可以根据实际业务需要进行调整。
总结
本文介绍了 extract-files 包的基本介绍以及使用方法，并通过示例对其的细节进行了详细说明。extract-files 可以方便地从 FormData、GraphQL 上传文件中提取文件信息，并返回一组文件和新 FormData，方便上传到服务器。同时，它也是一款 npm 包，可以轻松安装和使用。希望本文可以帮助您更好地理解和运用 extract-files 包。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/115246