Node学习笔记接收处理表单数据的好方法--formidable

Posted 2022-07-14 博读代码

说起前端，除了 html，css，javascript 等，还有一项必备的技能—— node，虽然 node 并非是开发潮流中很火爆的工具，但由于 node 中是使用 JavaScript进行编写，对前端还是非常友好的。

目前很多企业会用到 node 进行开发，这就得用到 node 进行中间件搭建或者一系列的 node 服务。作为前端，鲜少与数据打交道的我们，无论是编写还是处理上都是有相对不足的地方。

因此，本篇文章将会介绍 node 中非常好用的一个依赖，能够快速地接收以及处理表单数据，这个方法就是 formidable。

简介

单独看 formidable，很多人可能不知道代表的意思，但如果我们拆分单词来看 form，就是前端中常常见到的表单标签，而 formidable 就是用于表单的处理。

实际运用

场景一

最常用的场景就是接受参数。

请求常常会伴随着一些额外的并不需要用到请求参数，node 也不例外，我们通过被访问接收到req（请求）是很难查找到参数在哪的，如下图：

看，是不是只有一堆数据，根本无从下手，但如果使用了 formidable 的转换之后，很简单地就能够拿到参数。

const formidable = require(formidable);
const form = formidable();

form.parse(req, (err, fields, files) =>

formidable 会通过 parse() 方法对 req 进行处理，处理完之后会回调 fields 参数回来，这里就是我们所需要的页面请求的参数。

当然，formidable 还有一个好处就是，无论是 GET 还是 POST 方法都是可以进行转换来统一获取到对应的请求参数的。

场景二

文件上传也是在服务端，或者中间件中常使用到的。其实，相对文件接收其实也是通过场景一中的 fields，在 fileds 中我们也是可以获取到对应的文件信息，如标题（title）等信息。

但是，获取文件并不是文件上传，我们还要放到对应的服务器上，进行保存才是真正的上传，因此还是需要用到 formidable，接下来就介绍文件上传所需要用到 formidable 里面的方法以及属性。

form.uploadDir

• form.uploadDir=’path’, 设置上传文件存放的文件夹，默认为系统的临时文件夹。

form.maxFieldsSize

• form.maxFieldsSize = 10 * 1024 * 1024; 限制所有存储表单字段域的大小（除去file字段），如果超出，则会触发error事件，默认为2M。

formidable.File对象

• file.size：获取文件上传的大小，假如文件正在上传，file.size则表示已经上传的文件大小。
• file.path：上传文件的路径，如果不想上传到默认文件路径，通过上述的form.uploadDir进行设置文件路径,或者通过fileBegin进行设置。
• file.name：上传文件名称。
  等等……

form.on(method，callback)方法

上传文件的一些监听，例如 method 中的：

• form.on(‘progress’, function(bytesReceived, bytesExpected) ); 当有数据块被处理完之后，就会触发回调，因此能够很好的监听到完成到什么步骤，也可以进行进度条的把控。
• bytesReceived：服务器已经接收到当前表单数据多少字节；bytesExpected：将要接收到当前表单所有数据的大小。
• form.on(‘field’, function(name, value) ); 每当一个字段/值对已经收到时会触发该事件。
• form.on(‘fileBegin’, function(name, file) ); 在post流中检测到任意一个新的文件便会触发该事件。
• form.on(‘file’, function(name, file) ); 每当有一对字段/文件已经接收到，便会触发该事件。
• form.on(‘error’, function(err) ); 当上传流中出现错误便会触发该事件，当出现错误时，若想要继续触发request的data事件，则必须手动调用request.resume()方法。
• form.on(‘aborted’, function() ); 当用户中止请求时会触发该事件，socket中的timeout和close事件也会触发该事件，当该事件触发之后，error事件也会触发。
• form.on(‘end’, function() ); 当所有的请求已经接收到，并且所有的文件都已上传到服务器中，该事件会触发。此时可以发送请求到客户端。

结语

​在文章中介绍了两个场景，这两个场景中的使用方式并不冲突，具体的使用还是需要依照实际情况进行选择。

分享的内容并非是 formidable 的所有属性以及方法，只是介绍了相对常用而且相对重要的一些方法以及属性，具体请参照 npm 官方中的文档。

如果使用 formidable，我们能够快速地在服务端中对参数以及传入的数据进行处理，在开发的时候是很便捷的。对于刚上手编写 node 服务端的前端人员来说，这是一个非常好用的工具。

下期给大家分享更多实战中的点滴，如果大家对此感兴趣，欢迎各位关注、留言，大家的支持就是我的动力！