javascript - 如何从 Ajax FormData.append 访问变量？

Question

我正在将上传的文件从 HTML 表单发送到我的服务器，并尝试将自定义属性添加到 FormData() ，但它没有显示在我的服务器端。

我通过执行 var formData = new FormData(); 添加自定义属性，然后通过执行 formData.append("airlinename",airline_name); 进行附加，但是一旦我在服务器端获取数据，我就会查看 req 对象，但找不到 airlinename 。如何访问我的自定义属性？

我可以很好地访问该文件，但我找不到如何访问附加到 formData 的自定义属性.

HTML 表单

<form role="form">
    <input type="text"  id="load_db_name" name="load_db_name">
    <input type="file"  id="load_db_dir" name="load_db_dir">
</form>
<button id="load_generateDiagram" onClick="loadPastDiagram();" type="button">Load</button>

客户端JS

function loadPastDiagram()
{   
    var db_dir = document.getElementById('load_db_dir').files[0] || null;
    var _files = [db_dir];
    var airline_name = document.getElementById('load_db_name').value.trim();
    loadDiagram(airline_name,_files);
}

function loadDiagram(airline_name, files)
{
    var formData = new FormData();
        for (var f in files) {
            formData.append("files", files[f]);
        }
        formData.append("airlinename",airline_name); //<--- can't find this on the server side
        $.ajax({
            url: '/loadDiagram', 
            type: 'POST',
            success: function(res) {
                console.log("Success");
            },
            error: function(err) {
                console.log("Error ",err);
            },
            data: formData,

            //Options to tell jQuery not to process data or worry about content-type.
            cache: false,
            contentType: false,
            processData: false
        });
}

服务器 JS

app.post('/loadDiagram', function(req,res){
    console.log("[FILES]" + JSON.stringify(req.airlinename));
    console.log("[FILES]" + JSON.stringify(req.files.airlinename));
    console.log("[FILES]" + JSON.stringify(req.files.files));
});

输出

[DEV]  [FILES]undefined
[DEV]  [FILES]undefined
[DEV]  [FILES]{
    "fieldName": "files",
    "originalFilename": "Tool_fresshhh.tar.gz",
    "path": "../Output-Files/2833-fwh0ql.tf9od2t9.gz",
    "headers": {
        "content-disposition": "form-data; name=\"files\"; filename=\"Tool_fresshhh.tar.gz\"",
        "content-type": "application/x-gzip"
    },
    "ws": {
        "_writableState": {
            "objectMode": false,
            "highWaterMark": 16384,
            "needDrain": true,
            "ending": true,
            "ended": true,
            "finished": true,
            "decodeStrings": true,
            "defaultEncoding": "utf8",
            "length": 0,
            "writing": false,
            "corked": 0,
            "sync": false,
            "bufferProcessing": false,
            "writecb": null,
            "writelen": 0,
            "bufferedRequest": null,
            "lastBufferedRequest": null,
            "pendingcb": 0,
            "prefinished": true,
            "errorEmitted": false,
            "bufferedRequestCount": 0,
            "corkedRequestsFree": {
                "next": {
                    "next": null,
                    "entry": null
                },
                "entry": null
            }
        },
        "writable": false,
        "domain": null,
        "_events": {
            "error": [null],
            "close": [null]
        },
        "_eventsCount": 2,
        "path": "../Output-Files/2833-fwh0ql.tf9od2t9.gz",
        "fd": null,
        "flags": "w",
        "mode": 438,
        "autoClose": true,
        "bytesWritten": 449781,
        "closed": true
    },
    "size": 449781,
    "name": "Tool_fresshhh.tar.gz",
    "type": "application/x-gzip"
}

版本

• jQuery v1.11.1
• 快捷版本:3.14.0
• 节点版本:v6.5.0

Answer 1

我知道这“不酷”...

但是我在 1 个多小时前看到了这个问题，并且看到(相当快!!)作为评论发布的解决方案。 我等着他或她发布它，这样我就可以学到一些东西。

但是由于 Jaromanda X 上次出现实际上是在 5 分钟前，但没有发布答案...

我猜他或她对代表并不真正感兴趣。积分!
所以只是将这个问题标记为已回答...... ;)

服务器 JS

app.post('/loadDiagram', function(req,res){
    console.log("[FILES]" + JSON.stringify(req.body.airlinename));    // <-- 
    console.log("[FILES]" + JSON.stringify(req.files.files));
});

«第一个发布它的人，明白了! »