jquery AJAX 将表单数据发布到节点，结果为空 req.body答案

【问题标题】：jquery AJAX post formdata to node, results in empty req.bodyjquery AJAX 将表单数据发布到节点，结果为空 req.body
【发布时间】：2016-10-21 15:27:53
【问题描述】：

我正在尝试将数据发布到我的节点服务器。数据收集在以下 HTML 中

<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>

点击事件被jquery捕获，并发出ajax post

$('#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?

【问题讨论】：

data: { body : formData } ...?
@ davidkonrad ，这似乎不是问题。我认为数据会在没有指定的情况下进入 req.body。
如果您使用body-parser：该模块无法处理您正在使用的multipart/form-data。你需要像multer 这样的东西。

标签： javascript jquery ajax node.js express

【解决方案1】：

有更简单的方法可以完成此操作，您正在手动尝试，而不是我建议使用模块来处理表单和文件上传而不需要太多努力，我可以推荐Formidable

【讨论】：

【解决方案2】：

正如 robertklep 所说，问题在于 body-parser 无法解析多部分数据。所以应该使用不同的解析。我使用 busboy-connect 执行以下操作：

        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);
            });
        });

也可以使用另一个解析器。

【讨论】：

【解决方案3】：

使用bodyparser 例如

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

}));

和而不是

req.body

使用

req.body.name or
req.body.url

【讨论】：

正文解析器在这里不起作用。我推荐使用 multer，它由管理 body-parser 的同一个人管理，它可以处理 multipart/formdata。