上传文件时如何在服务器上获取表单数据值？

Question

我有一个表格，其中有one user input field where user type his name and one type="file" which need to be uploaded on server。我可以在服务器上上传文件 但我想在服务器上获取请求参数（user enter name）。我使用body-parser 获取值（req.body），但得到undefined

HTML

<form id="fileUploadForm">
    <input type="file" name="file" id="fileId"/>
    <input type="submit" value="Upload" name="submit" class="submit">
    username <input type="text" placeholder="enter first name"  name="username" />
</form>

JS 客户端

$('.submit').on('click', function (e) {
            e.preventDefault();
            e.stopPropagation();
            if ($('#fileId').val().length === 0) {
                alert('please insert file')
            } else {
                var form = $('#fileUploadForm')[0];

                // Create an FormData object
                var data = new FormData(form);
                $.ajax({
                    url: 'http://localhost:3000/upload',
                    type: 'POST',
                    data: data,
                    cache: false,
                    enctype: 'multipart/form-data',
                    dataType: 'json',
                    processData: false, // Don't process the files
                    contentType: false, // Set content type to false as jQuery will tell the server its a query string request
                    success: function (data, textStatus, jqXHR) {
                        if (typeof data.error === 'undefined') {
                            // Success so call function to process the form
                        }
                        else {
                            // Handle errors here
                            console.log('ERRORS: ' + data.error);
                        }
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        // Handle errors here
                        console.log('ERRORS: ' + textStatus);
                        // STOP LOADING SPINNER
                    }
                });
            }
        })

我的文件已成功上传到服务器，但我对这两行感到困惑

  var form = $('#fileUploadForm')[0];
    // Create an FormData object
  var data = new FormData(form);

数据中有什么？从我的角度来看数据包含username value and file data which need to be uploaded

服务器代码

如何在服务器上获取 username and file data 值。我已经使用 bodypaser 插件，但 req.body 未定义

这是我的代码

var express = require('express');
var multer = require('multer');
var bodyParser = require('body-parser');
var cors = require('cors');
var app = express();
var PORT = process.env.PORT || 3000;

// use of body parser
app.use(bodyParser.urlencoded({
    extended: true
}));

app.use(bodyParser.json());
app.use(cors());

var storage = multer.diskStorage({ //multers disk storage settings
    destination: function (req, file, cb) {
        cb(null, './uploads/')
    },
    filename: function (req, file, cb) {
        var datetimestamp = Date.now();
        cb(null, file.fieldname + '-' + datetimestamp + '.' + file.originalname.split('.')[file.originalname.split('.').length - 1])
    }
});
var upload = multer({ //multer settings
    storage: storage
}).single('file');


app.post('/upload', function (req, res) {
    console.log(req.body)
    console.log(req)
    upload(req, res, function (err) {
        if (err) {
            res.json({error_code: 1, err_desc: err});
            return;
        }
        res.json({error_code: 0, err_desc: null});
    });
});


app.listen(PORT, () => {
    console.log(`App is listening to ${PORT}`);
})

如何在服务器上获取从客户端传递过来的表单字段值？

Answer 1

在表单数据中再添加一个键。

var data = new FormData();
var files = $("#fileId").get(0).files;
data.append("fileUploadForm", files[0]);
data.append("Username",$('[name="username"]').val());

使用参考Link