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
}

我认为它与我设置表达式身体解析器的方式有关，但我似乎无法弄清楚正确的配置。这是我的设置（相关代码简化）：

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时遇到了同样的问题，我能够使其与该功能一起使用

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

Answer 3

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

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

NodeJS Multipart / form-data with arrays

3 个答案: