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

小技术 8个月前 (07-14) 0 999+

关注

说起前端，除了 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.maxFieldsSize

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

formidable.File对象

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() {}); 当所有的请求已经接收到，并且所有的文件都已上传到服务器中，该事件会触发。此时可以发送请求到客户端。