在现代的 Web 开发中，前端和后端之间的数据交换至关重要。其中，使用 FormData 是一种常见的方式，它允许开发者在表单中上传多个文件或者键值对。而 Postman 团队的开源项目 @postman/form-data，提供了更加便捷和灵活的 FormData 解析方式。本文将介绍如何使用该 npm 包，让你的前端开发更加方便。
安装 @postman/form-data
在命令行中使用 npm 安装该包：
--- ------- ------------------
创建 FormData
首先，我们需要使用 @postman/form-data 中的 FormData 类来创建数据。它构造函数接受一个可选的 options 参数，即配置对象，其中包含：
contentType，指定 HTTP 请求中的 content-type，例如"multipart/form-data"或"application/x-www-form-urlencoded"；includeUndefinedValues，当为 true 时包含值为 undefined 的字段；uploadTimeout，指定文件上传的超时时间，单位为毫秒。
以下是一个示例：
----- - -------- - - ------------------------------ ----- ---- - --- ---------- ------------ ---------------------- ----------------------- ----- -------------- ---- ---
添加键值对
要向 FormData 中添加键值对，使用 append 方法。它接受两个参数，一个是键名，一个是键值。
----------------------- ---------- ------------------ ----
键名必须为字符串，键值可以为字符串或者数字。如果需要添加复杂的对象，可以使用 JSON.stringify 将其转换为字符串再添加到 FormData 中。
添加文件
使用 append 方法也可以向 FormData 中添加文件，但需要进行一些额外的配置。我们需要提供文件的内容、文件名以及类型。
----- -- - -------------- ----- ---- - ---------------- ----- ---- - ------------------------------------ ------------- --------------------- ----- - --------- ----------- ------------ ------------ ---
第三个参数是一个配置对象，包含 filename 和 contentType 两个字段。其中，filename 表示文件名，contentType 表示文件类型。
获取 FormData 的内容
通过 getBuffer 方法获取 FormData 的二进制内容。我们可以在 Node.js 中使用该方法将其发送到服务器上，或者在浏览器中将其添加到 Fetch API 中的请求中。
----- ------ - ----------------- --------------------
总结
@postman/form-data 提供了一个方便的方式来处理 FormData，是前端开发中的一大利器。我们可以使用它来上传文件和键值对，而无需担心复杂的实现细节。在接下来的开发中，你可以尝试使用该 npm 包来优化你的代码。
参考文献
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5f72b5f3a9b7065299ccbbbc