在前端开发中，我们经常会需要发送 HTTP 请求并且携带一些表单数据或文件。而 npm 包 form-data 就是专门用来构建表单数据的工具。但是，由于一些历史遗留问题，它的 API 不够友好，使用也相对复杂。form-data2 就是基于 form-data 开发的一个新版本，它几乎完全兼容 form-data 的 API，并且使用更加简单易懂，是一个非常值得推荐的 npm 包。本文将详细介绍如何使用 form-data2。
安装
要使用 form-data2，首先要在项目中安装它。你可以通过 npm 命令来进行安装：
--- ------- ----------
基础使用
使用 form-data2 首先需要引入它：
----- -------- - ----------------------
然后，我们就可以创建一个 FormData 实例，并通过 append 方法来添加数据：
----- -------- - --- ----------- --------------------------- --------- --------------------------- --------
接下来我们要将这个表单数据发送到服务器。可以使用 node-fetch 或其它 HTTP 请求工具来发送请求，但这里以 node-fetch 为例：
----- ----- - ---------------------- --------------------------------- - ------- ------- -------- ---------------------- ----- --------------------- -- ----------- -- ----------- ------------ -- -------------------
这里我们通过 FormData 实例的 getHeaders 方法和 getBuffer 方法获取请求的 headers 和 body，并将它们传递给 fetch 的请求选项中。这样我们就成功创建了一个携带表单数据的 HTTP 请求。
携带文件
除了表单数据，我们还经常需要上传文件到服务器。form-data2 可以通过 append 方法来添加 File 对象：
----- -- - -------------- ------------------------- -------------------------------------
这里我们添加了一个名为 avatar 的文件，它的内容从文件系统中的 avatar.png 文件中读取。然后我们依然可以通过 getHeaders 和 getBuffer 方法来获取 headers 和 body，并发送 HTTP 请求。
如果我们要添加多个文件，则可以分别添加多个相同名称的文件：
------------------------ ------------------------------------ ------------------------ ------------------------------------
在接收到这样的请求之后，服务器端一般会将它们存储在一个数组或对象中。如果服务器端是基于 Express.js 的，那么可以使用 multer 中间件来方便的处理文件上传。
总结
使用 form-data2 可以方便地构建携带表单数据和文件的 HTTP 请求。它的使用方法与 form-data 几乎相同，但是 API 更加友好，使用也更加便利。值得推荐。
完整示例代码如下：
----- -------- - ---------------------- ----- -- - -------------- ----- ----- - ---------------------- ----- -------- - --- ----------- --------------------------- --------- --------------------------- -------- ------------------------- ------------------------------------- --------------------------------- - ------- ------- -------- ---------------------- ----- --------------------- -- ----------- -- ----------- ------------ -- -------------------
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedaba0b5cbfe1ea06107f8