当前位置: 首页 > 工具软件 > formidable > 使用案例 >

formidable模块——一个Node.js模块

夔博
2023-12-01

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 对象中的每个属性都是非必须的。

  1. encoding :设置表单域的编码,默认为utf-8
  2. uploadDir :设置上传文件存放的文件夹,默认为系统的临时文件夹,可以使用fs.rename()来改变上传文件的存放位置和文件名
  3. keepExtensions :设置该属性为true可以使得上传的文件保持原来的文件的扩展名,默认为false
  4. maxFieldsSize :限制上传文件的大小,如果超出,则会触发error事件,默认为2M
  5. maxFields :设置可以转换多少查询字符串,默认为1000

解析表单信息

在解析对象完成之后,我们就可以开始对表单进行解析了。具体语法是:form.parse(request, callback)

  1. request:表示请求信息,因为我们是对表单进行解析,所以首先需要获取到表单信息,所以这个参数是 request 事件的第一个参数。
  2. callback:表示一个回调函数,接收解析完成之后的信息。有三个参数(err, fields, files),分别表示err请求出错信息,fields普通请求参数,files上传文件请求参数

formidable 模块中包含的事件

在使用parse方法对表单进行解析时,解析对象经历了一系列过程,我们可以监听这些过程从而完成某些操作,这些过程我们可以理解为事件。

  1. progress:当有数据块被处理之后会触发该事件。具体语法:form.on('progress', (bytesReceived, bytesExpected) => {});
  2. field:每当一个字段 / 值对已经收到时会触发该事件。具体语法:form.on('field', (name, value) => {});
  3. fileBegin:在post流中检测到任意一个新的文件便会触发该事件。具体语法:form.on('fileBegin', (name, file) => {});
  4. file:每当有一对字段/文件已经接收到,便会触发该事件。具体语法:form.on('file', (name, file) => {});
  5. error:当上传流中出现错误便会触发该事件,当出现错误时,若想要继续触发request的data事件,则必须手动调用request.resume()方法。具体语法:form.on('error', (err) => {});
  6. aborted:当用户中止请求时会触发该事件。具体语法:form.on('aborted', () => {});
  7. 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);
 类似资料: