Form 表单数据处理 简单教程 formidable 使用心得
发布于 13 年前 作者 blue5tar 49365 次浏览 最后一次编辑是 8 年前

入门,高手见笑

表单数据一种是get方式, 另一种是post 方式

1.get方式

对于get方式,node处理起来非常简单

如以下代码:

var urlParsed = url.parse(request.url);
var getData = querystring.parse(urlParsed.query); 
//getData 为object类型 同名表单为array

get返回结果:

{
    name: "blue5tar",
    hobby:["read", "surfing"]
}

2. post方式

post方式处理起来比较麻烦,但是有了node-formidable 这个module 我们就省事多了

使用npm安装 node-formidable

npm install formidable

formidable 使用方法

formidable = require("formidable"); //载入 formidable

var form = new formidable.IncomingForm(); 
var post = {},
     file = {};
form.uploadDir = '/tmp';  //文件上传 临时文件存放路径 

form
    .on('error', function(err) {
        console.log(err); //各种错误
    })
     //POST 普通数据 不包含文件 field 表单name value 表单value 
    .on('field', function(field, value) { 
        if (form.type == 'multipart') {  //有文件上传时 enctype="multipart/form-data" 
            if (field in post) { //同名表单 checkbox 返回array 同get处理
                if (util.isArray(post[field]) === false) {
                    post[field] = [post[field]];
                }
                post[field].push(value);
                return;
            }
        }
        post[field] = value;
    })
    .on('file', function(field, file) { //上传文件
        file[field] = file;
    })
    .on('end', function() {
        fn(); //解析完毕 做其他work
    });
form.parse(request); //解析request对象

post方式有个bug

当form 有enctype=“multipart/form-data” 和没有 enctype=“multipart/form-data” 时 同名表单处理的方式不一样。
有 enctype=“multipart/form-data” 时 同名表单会被最后一个value覆盖,
没有 enctype="multipart/form-data"时,同get一样 会返回一个array

所以, 在 'field’事件时,对form.type进行不同处理 , 同名表单都返回array

还有一个问题,上传文件时 如果不选择文件 也会在临时目录生成空的临时文件, 解决办法:
修改 formidable 模块 lib/incoming_form.js handlePart方法 在183行处添加:

if (part.filename == "") {
   return;
}

上传文件返回的结构如下:

{
 size: 40635, //文件大小
 path: '/tmp/f0423db2bf874499423ce409e2f222f4', //临时文件路径
 name: 'arrow.png', //文件名称
 type: 'image/png',  //文件 mime
 lastModifiedDate: Sun, 11 Mar 2012 07:19:44 GMT,
 _writeStream:     
     { path: '/tmp/f0423db2bf874499423ce409e2f222f4',
     fd: 7,
     writable: false,
     flags: 'w',
     encoding: 'binary',
     mode: 438,
     bytesWritten: 40635,
     busy: false,
     _queue: [],
     drainable: true },
 length: [Getter],  //同size
 filename: [Getter], //同name
 mime: [Getter] //同type
} 

文件上传到临时文件目录下,我们还要将临时文件, 移到我们的上传目录中

fs.rename(file.path, global.appConfig.uploadDir + '/' + file.filename);

有不对的地方,欢迎拍砖。

Links:

  1. 关于POST文件上传原理 看这里: http://club.cnodejs.org/topic/4f16442ccae1f4aa270010ad
  2. 关于node-formidable详解 看这里: http://club.cnodejs.org/topic/4f16442ccae1f4aa2700104d
5 回复

上传的文件的结构是怎么得到的?怎么打印出来,另外我怎么得到这些key-value对中的value啊?

上传文件结构 这样得到的

   .on('file', function(field, file) { 
        console.log(file); //打印上传文件结构
        console.log(file.path); //文件路径 
        file[field] = file;
    })

兄弟这篇文章救了我啊~ :)

我既用 request.addListener(‘data’, function(postDataChunk){ postData += postDataChunk; }); 又用formidable解析。。。 没上传文件的时候没发现错误,上传的时候才有错 一直以为是要request.pause()然后再resume呢,有了formidable就不用了 -,-

不知道此文针对的是哪个版本。。

特地注册了账号来回复。楼主所说的两个bug我都碰到了,用的是目前最新的v1.1.1。 另外,name[] 这种在php中识别为name数组的写法,在这里也行不通了,就很气。 有一种自己写parser的冲动。

回到顶部