jquery AJAX發佈formdata到節點，結果爲空req.body

我試圖發佈數據到我的節點服務器。數據都聚集在下面的HTMLjquery AJAX發佈formdata到節點，結果爲空req.body

<label for="files" class="col-md-4 control-label">Files</label> 
<div class="col-md-7"> 
    <input type="file" id="files" name="files[]" multiple="multiple"> 
</div> 
<label for="name" class="col-md-4 control-label">Name</label> 
<div class="col-md-7"> 
    <input id="name" name="name" class="form-control" type="text"> 
</div> 
<label for="url" class="col-md-4 control-label">Landing Page</label> 
<div class="col-md-7"> 
    <input id="url" name="name" class="form-control" type="text"> 
</div> 
<button type="button" id="add_files" class="btn btn-primary" style="background-color:#27AE60;">Add Files</button>

click事件被抓的jQuery，併發出了ajax後

$('#add_files').on('click', function() { 
    var files = $("#files")[0].files; 
    var name = $("#name").val(); 
    var url = $("#url").val(); 
    var formData = new FormData(); 
    formData.append("name", name); 
    formData.append("url", url); 
    $.each($('#files')[0].files, function (i, file) { 
     formData.append('file-' + i, file); 
    }); 
    $.ajax({ 
     url: '/newData', 
     type: 'POST', 
     data: formData, // The form with the file inputs. 
     processData: false, // Using FormData, no need to process data. 
     contentType: false 
    }).done(function() { 
     console.log("Success: Files sent!"); 
    }).fail(function() { 
     console.log("An error occurred, the files couldn't be sent!"); 
    }); 
});

然後後由我的節點服務器，但req.boy抓是空的

app.post('/newData',function(req,res){ 
    console.log("req body ",req.body) 
    console.log("req body ",req.body.data) 
})

所得以下：

req body {} 
req body undefined

有什麼想法出了什麼問題？

我的實現是基於以下幾點： https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects How can I upload files asynchronously?

來源

2015-08-13 cs04iz1

'數據：{體：FORMDATA}'...？ – davidkonrad

@ davidkonrad，這似乎不是問題。我認爲數據沒有指定就轉到req.body。 – cs04iz1

如果您使用['body-parser']（https://www.npmjs.com/package/body-parser）：該模塊不處理您正在使用的'multipart/form-data'。你需要像['multer']（https://www.npmjs.com/package/multer）。 – robertklep

正如robertklep所提到的，問題是body-parser無法解析多部分數據。所以應該使用不同的解析。我用打雜，做連接如下：

 var fstream; 
     var result = []; 
     var number_of_files = 1; 
     req.pipe(req.busboy); 
     req.busboy.on('field', function(fieldname, val) { 
      field_obj = {} 
      field_obj[fieldname] = val; 
      result.push(field_obj); 
      console.log(field_obj) 
     }); 
     req.busboy.on('file', function(fieldname, file, filename) { 
      console.log("Uploading: " + filename); 
      //Path where image will be uploaded 
      if (result.length > 0) { 
       var file_type = filename.substr(filename.length - 4); 
       filename = result[0].name + '_' + number_of_files + file_type; 
       number_of_files++; 
      } 
      fstream = fs.createWriteStream(__dirname + "/" + filename); 
      file.pipe(fstream); 
      fstream.on('close', function() { 
       console.log("Upload Finished of " + filename); 
       result.push(filename); 
      }); 
     });

另一個解析器可以使用。

來源

2015-08-14 11:27:30 cs04iz1

有更簡單的方法來完成這件事，你是手動嘗試，相反，我會建議使用一個模塊來處理表格和文件上傳沒有太多的努力，我可以推薦Formidable

來源

2015-08-13 15:02:27 edsadr

使用bodyparser e.g

var bodyParser = require('body-parser'); 
app.use(bodyParser.json()); 
app.use(bodyParser.urlencoded({ 
    extended : true 

}));

和代替

req.body

使用

req.body.name or 
req.body.url

來源

2016-10-21 07:27:53 Sunita

jquery AJAX發佈formdata到節點，結果爲空req.body

回答

相關問題