在前端开发中，我们常常需要处理文件上传的功能，如上传文件到服务器、剪贴板粘贴、拖拽等。而在处理上传功能中，我们需要将上传的文件抽取出来，并以合适的方式进行处理。extract-files 就是一款 npm 包，可以从 FormData、GraphQL 上传文件中提取文件信息，并返回一组文件和新 FormData，以便方便上传到服务器。本文将向您介绍如何使用 extract-files 进行文件处理。
安装
使用 npm 安装 extract-files：
npm install extract-files --save
入门使用
首先，引用 extract-files：
import { createReadStream } from 'fs'; import { extractFiles } from 'extract-files'; const stream = createReadStream('my-file.txt'); const { files, formData } = await extractFiles({ operations: '', map: {} }, stream); console.log(files); console.log(formData);
可以看到，代码中引用了 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
