formidable模块是一个Node.js模块,主要用于解析表单,支持get post请求参数,文件上传等。
下载 formidable 模块
可以通过 npm 下载,模块的引入还是用通过 require 。
npm i formidable
创建解析对象
创建解析对象有四种方式,每种方式都可以使用并且没有区别
const formidable = require('formidable');
const form = formidable(options);
const { formidable } = require('formidable');
const form = formidable(options);
const { IncomingForm } = require('formidable');
const form = new IncomingForm(options);
const { Formidable } = require('formidable');
const form = new Formidable(options);;
在创建对象的时候,我们可以传入参数,option 是一个对象,下面我列举部分参数,option 对象中的每个属性都是非必须的。
- encoding :设置表单域的编码,默认为utf-8
- uploadDir :设置上传文件存放的文件夹,默认为系统的临时文件夹,可以使用fs.rename()来改变上传文件的存放位置和文件名
- keepExtensions :设置该属性为true可以使得上传的文件保持原来的文件的扩展名,默认为false
- maxFieldsSize :限制上传文件的大小,如果超出,则会触发error事件,默认为2M
- maxFields :设置可以转换多少查询字符串,默认为1000
解析表单信息
在解析对象完成之后,我们就可以开始对表单进行解析了。具体语法是:form.parse(request, callback)
。
- request:表示请求信息,因为我们是对表单进行解析,所以首先需要获取到表单信息,所以这个参数是 request 事件的第一个参数。
- callback:表示一个回调函数,接收解析完成之后的信息。有三个参数(err, fields, files),分别表示err请求出错信息,fields普通请求参数,files上传文件请求参数
formidable 模块中包含的事件
在使用parse
方法对表单进行解析时,解析对象经历了一系列过程,我们可以监听这些过程从而完成某些操作,这些过程我们可以理解为事件。
- progress:当有数据块被处理之后会触发该事件。具体语法:
form.on('progress', (bytesReceived, bytesExpected) => {});
- field:每当一个字段 / 值对已经收到时会触发该事件。具体语法:
form.on('field', (name, value) => {});
- fileBegin:在post流中检测到任意一个新的文件便会触发该事件。具体语法:
form.on('fileBegin', (name, file) => {});
- file:每当有一对字段/文件已经接收到,便会触发该事件。具体语法:
form.on('file', (name, file) => {});
- error:当上传流中出现错误便会触发该事件,当出现错误时,若想要继续触发request的data事件,则必须手动调用request.resume()方法。具体语法:
form.on('error', (err) => {});
- aborted:当用户中止请求时会触发该事件。具体语法:
form.on('aborted', () => {});
- end:当所有的请求已经接收到,并且所有的文件都已上传到服务器中,该事件会触发。具体语法:
form.on('end', () => {});
具体实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
label {
display: inline-block;
width: 70px;
margin-right: 5px;
text-align: right;
}
</style>
</head>
<body>
<form action="http://localhost:8989/index" enctype="multipart/form-data" method="POST">
<label for="#username">用户名:</label>
<input type="text" name="username" class="username" id="username">
<br />
<br />
<label for="#userpass">密码:</label>
<input type="password" name="userpass" id="userpass">
<br />
<br />
<label for="#userpass">照片:</label>
<input type="file" name="userimg" id="userage">
<br />
<br />
<label for="">性别:</label>
<label for=""> <input type="radio" name="usersex" class="usersex" checked value="男">男</label>
<label for=""> <input type="radio" name="usersex" class="usersex" value="女">女</label>
<br />
<button id="submit" type="submit">提交</button>
</form>
</body>
</html>
在使用js时必须保证已经将Node.js安装
const http = require('http');
const url = require('url');
const formidable = require('formidable');
let server = http.createServer((req, res) => {
res.setHeader("Access-Control-Allow-Origin", "*");
res.writeHead(200, { 'Content-Type': 'text/html; charset=utf8' });
let urlObj = url.parse(req.url, true);
let params = urlObj.query;
if (urlObj.path == "/index") {
const form = formidable();
if (req != null) {
form.parse(req, (err, fielads, files) => {
console.log("fielads", fielads);
console.log("files", files);
});
form.on('progress', (bytesReceived, bytesExpected) => {
console.log("收到的字节数" + bytesReceived);
console.log("预期字节数" + bytesExpected);
});
form.on('field', (name, value) => {
console.log(name + " = " + value);
});
form.on('fileBegin', (name, file) => {
console.log(name + " = ", file);
});
form.on('file', (name, file) => {
console.log(name + " = ", file);
});
form.on('end', () => {
console.log('结束解析');
});
}
}
res.end();
});
server.listen(8989);