npm 包 form-data2 使用教程

阅读时长 4 分钟读完

在前端开发中,我们经常会需要发送 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

纠错
反馈