在express項目中使用formidable & multiparty實現文件上傳

安裝 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內容：

{
“name”: “wuwanyu”,
“icon”: {
“size”: 8666,
“path”: “public\upload\upload_713dad980d7b7dce0847476820f8b1d4.jpg”,
“name”: “4eff22a5d3d8341d3bf472adbb151c18.jpg”,
“type”: “image/jpeg”,
“mtime”: “2016-04-06T13:18:15.508Z”
}
}

 

 

方式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的內容（一個文件時）：

{
“name”: [ “tom”],
“icon”: [
{
“fieldName”: “icon”,
“originalFilename”: “4eff22a5d3d8341d3bf472adbb151c18.jpg”,
“path”: “public\upload\SKt_XEwcxnBD_4qc6qI-PBw9.jpg”,
“headers”: {
“content-disposition”: “form-data; name=\”icon\”; filename=\”4eff22a5d3d8341d3bf472adbb151c18.jpg\”“,
“content-type”: “image/jpeg” },
“size”: 8666
}
]
}

 

返回值（多個文件時 ）：

{
“name”: [ “tom” ],
“icon”: [
{
“fieldName”: “icon”,
“originalFilename”: “3bd870116ff9708f5141aa8a374aeabf.jpg”,
“path”: “public\upload-MVUwGgwT9DbGCZh50yBGLHy.jpg”,
“headers”: {
“content-disposition”: “form-data; name=\”icon\”; filename=\”3bd870116ff9708f5141aa8a374aeabf.jpg\”“,
“content-type”: “image/jpeg” },
“size”: 25754
},
{
“fieldName”: “icon”,
“originalFilename”: “4eff22a5d3d8341d3bf472adbb151c18.jpg”,
“path”: “public\upload\HJIOAYHXjluOTtWZ2M-qwHUq.jpg”,
“headers”: {
“content-disposition”: “form-data; name=\”icon\”; filename=\”4eff22a5d3d8341d3bf472adbb151c18.jpg\”“,
“content-type”: “image/jpeg” },
“size”: 8666
}
]
}

 

總結：

formidable和multiparty都能實現解析表單的功能，返回值的數據結構和字段名稱稍有不同。

formidable解析結果是json數據格式的。multiparty 返回值是數組格式的，解析同一個字段多個值時，比如上傳多張圖片，使用multiparty更合適。

文件將被上傳到public/upload目錄下，如果要移動文件位置，可以使用fs模塊的rename方法。

 

Github項目地址： https://github.com/wuwanyu/formidable_multiparty_demo

 

項目運行效果圖

（1）formidable表單上傳及處理結果：

（2）multipaty表單上傳及處理結果：