在 NodeJS 上同时接收相同的名称输入和多部分/表单数据输入作为数组和文件附件

Question

我在使用 enctype multipart/form-data 时遇到了一些麻烦，同时发送具有相同名称的输入以作为数组获取。我似乎只能获得上传的图像或数组输入，但不能同时获得...

例如，我有这个表格：

<form method="post" action="/test">
  <input name="testinput" value="valueA">
  <input name="testinput" value="valueB">
  <input type="file" name="fileattachment">
  <input type="submit" value="Submit">
</form>

如果我将表单的 enctype 设置为 multipart/form-data，如下所示：

<form method="post" action="/test" enctype="multipart/form-data">

我最终在我的 NodeJS 应用程序中很好地收到了“fileattachment”，但我只得到了“testinput”的最后一个值，如下所示：

//req.body
//---
{
    testinput: 'valueB' // I'm missing valueA!
}

//req.files
//---
{
    fileattachment: { 
        name: 'biglogo.png',
        data: <Buffer 89 ... >,
        encoding: '7bit',
        mimetype: 'image/png',
        mv: [Function] 
    }
}

如果未设置 enctype，则“testinput”数据以数组形式出现，但“fileattachment”丢失，我只获取上传文件的名称，如下所示：

//req.body
//---
{
    testinput: ['valueA', 'valueB'],
    fileattachment: 'some_picture.png' // Useless for file uploading
}

我认为这与我设置 express 正文解析器的方式有关，但我似乎无法找出正确的配置。这是我的设置（针对相关代码进行了简化）：

var express = require('express');
var fileUpload = require('express-fileupload');
var bodyParser = require('body-parser');

var app = express();
app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());
app.use(fileUpload()); // Must be placed after, not before, bodyparser's use, otherwise files fail to be uploaded correctly...

app.post('/test', function(req, res) { 
    // Some code
});

另外，这是我的 package.json 文件：

{
    "name": "my-app",
    ...
    "dependencies": {
        "body-parser": "~1.15",
        "express": "~4.14",
        "express-fileupload": "^0.0.5"
    }
}

这是在 node/6.9.1 上运行的

我已经看到了这个非常相似的问题Multipart/form-data with arrays，但它已经存在 2 年了，没有得到回答，而且似乎没有使用依赖项 fileUpload。

另外，我尝试了这个问题的答案Handling input arrays in Express forms? 提出的方法，但我一直在服务器上看到的只是文本而不是数组，如下所示：

{ 
    'something[0][testinput]': 'valueA',
    'something[1][testinput]': 'valueB'
}

我错过了什么？我应该尝试什么？

Answer 1

我能够通过从express-fileupload 切换到Multiparty 来获得想要的结果

设置：

var express = require('express');
var bodyParser = require('body-parser');

app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());

我的代码：

var multiparty = require('multiparty');
app.post('/test', function(req, res) { 
    (new multiparty.Form()).parse(req, function(err, fields, files) {
        // handling fields and files code
    });
});

字段：

{ 
    testinput: ['valueA', 'valueB']
}

文件：

{ 
    fileattachment: [ 
        { 
            fieldName: 'fileattachment',
            originalFilename: 'biglogo.png',
            path: '/tmp/blablaasdfgh.png',
            headers: [Object],
            size: 10130 
        } 
    ]
}

如您所见，输入被捆绑在一个数组中，并且文件似乎已正确接收。

Answer 2

将express-fileupload 库配置为使用parseNested 属性，如下所示：

const fileUpload = require('express-fileupload');
app.use(fileUpload({
    parseNested: true // magic
}));                  

Answer 3

我在使用 express-fileupload 时遇到了同样的问题，我能够使用此功能使其工作

ProjectController.prototype.teste = async function (request, response, next) {
    let documents = parseFormDate(request.body, request.files);
    return response.status(200).json({ 'body': request.body, 'documents': documents });
};

和

const parseFormDate = (field, files) => {
    let documents = []
    for (const key in files) {
        if (files.hasOwnProperty(key)) {
            const file = files[key];
            if (field[key]) {
                documents.push({ title: field[key], document: file })
                delete field[key];
            }

            delete files[key];
        }
    }

    return documents;
}