安装 formidable,multiparty 模块
npm install formidable,multiparty –save -d
表单上传
<form id="addForm" enctype="multipart/form-data"> <fieldset> <h3>创建用户</h3> 姓名:<input type="text" name="name" placeholder="请输入姓名"/> <br> <br> 头像:<input type="file" name="icon" multiple="multiple"> <br> <br> <input type="button" onclick="submit1()" value="提交(formidable处理)"/> <input type="button" onclick="submit2()" value="提交(multiparty处理)"/> <br> <br> </fieldset> </form>
ajax将表单内容发送至后台接口:
<script src="/js/jquery-1.9.1.min.js"></script>
<script>
function submit1(){
var data = new FormData($('#addForm')[0]); //获取表单内容
ajaxFormPost("/api/user/addUser_with_formidable",data,function(data){ //ajax提交表单
console.log("formidable处理结果:",data);
alert(data.code+":"+data.msg);
});
}
function submit2(){
var data = new FormData($('#addForm')[0]); //获取表单内容
ajaxFormPost("/api/user/addUser_with_multiparty",data,function(data){ //ajax提交表单
console.log("multiparty处理结果:",data);
alert(data.code+":"+data.msg);
});
}
//ajax Post方法封装
function ajaxFormPost(url,formData,callBack){
$.ajax({
type:'POST',
dataType:'text',
processData: false, // 告诉JSLite不要去处理发送的数据
contentType: false, // 告诉JSLite不要去设置Content-Type请求头
data:formData,
url:url,
success:function(data){
data = JSON.parse(data);
callBack(data);
},
error:function(data){
console.log('error:',data)
callBack(data);
}
});
}
</script>
注意:express项目中app.js一定引入body-parser模块
var bodyParser = require('body-parser'); app.use(bodyParser.json()); // form表单解析必须 app.use(bodyParser.urlencoded({ extended: false }));
方式1:formidable解析表单关键代码
exports.formidableFormParse = function(req,callback){
var form = new formidable.IncomingForm({
encoding:"utf-8",
uploadDir:"public/upload", //文件上传地址
keepExtensions:true //保留后缀
});
form.parse(req, function(err, fields, files) {
var obj ={};
Object.keys(fields).forEach(function(name) { //文本
console.log('name:' + name+";filed:"+fields[name]);
obj[name] = fields[name];
});
Object.keys(files).forEach(function(name) { //文件
console.log('name:' + name+";file:"+files[name].path);
obj[name] = files[name];
});
callback(err,obj);
});
}
返回值obj内容:
{ |
方式2:multiparty解析表单关键代码
exports.multipartyFormParse = function(req,callback){ var form = new multiparty.Form({ encoding:"utf-8", uploadDir:"public/upload", //文件上传地址 keepExtensions:true //保留后缀 }) form.parse(req, function(err, fields, files) { var obj ={}; Object.keys(fields).forEach(function(name) { //文本 console.log('name:' + name+";filed:"+fields[name]); obj[name] = fields[name]; }); Object.keys(files).forEach(function(name) { //文件 console.log('name:' + name+";file:"+files[name]); obj[name] = files[name]; }); callback(err,obj); }); }
返回值obj的内容(一个文件时):
{ |
返回值(多个文件时 ):
{ |
总结:
formidable和multiparty都能实现解析表单的功能,返回值的数据结构和字段名称稍有不同。
formidable解析结果是json数据格式的。multiparty 返回值是数组格式的,解析同一个字段多个值时,比如上传多张图片,使用multiparty更合适。
文件将被上传到public/upload目录下,如果要移动文件位置,可以使用fs模块的rename方法。