Node.js，multer 和 req.body 为空

Question

这是我的问题，我有一个可以插入文件和字段的表单，但我只收到文件而不收到参数test ？ 为什么？

这是我的代码：

应用程序.js：

var express = require('express');
var bodyParser = require('body-parser');
var app = express();
var port = 8000;
var multer = require('multer'); // v1.0.5
var storage =   multer.diskStorage({
  destination: function (req, file, callback) {
    callback(null, './uploads');
  },
  filename: function (req, file, callback) {
    callback(null, file.originalname.substring(0,file.originalname.lastIndexOf('.')) + '-' + Date.now() + file.originalname.substring(file.originalname.lastIndexOf('.'),file.originalname.length));
  }
});
var upload = multer({ storage : storage}).single('fileUpload');

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

app.post('/api/upload',function(req,res){
    console.log(req.body);
    upload(req,res,function(err) {
        if(err) {
            return res.end("Error uploading file.");
        }
        res.end("File is uploaded");
    });
});

app.listen(port, function () {
    console.log('Express server inizializzato sulla porta ' + port);
});

索引.html：

<html>
    <head>
        <title>Test upload</title>
    </head>
    <body>
        <form name="form" action="http://localhost:8000/api/upload" method="post" enctype="multipart/form-data">
            <input type="text" name="test" />
            <input type="file" name="fileUpload" />
            <input type="submit" value="invia" />
        </form>
    </body>
</html>

有人可以帮助我吗？

Answer 1

2017年更新

来自自述文件

请注意， req.body 可能尚未完全填充。 这取决于客户端向服务器传输字段和文件的顺序。

我通过在前端颠倒表单对象属性的顺序解决了我的问题：

    var newFormObj  = new FormData();
    newFormObj.append('internalUserID', internalUserID);
    newFormObj.append('listingImage', this.binaryImages[image]);

在后端：

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    console.log(req.body.internalUserID) // YAY, IT'S POPULATED
    cb(null, 'listing-pics/')
  },                    
  filename: function (req, file, cb) {
    cb(null, file.fieldname + '-' + Date.now())
  }                     
});                     

var upload = multer({ storage: storage });

Answer 2

您需要重新排列前端请求中的字段，下面我将解释，

我正在使用multer在我的nodejs应用程序中上传多个文件和单个文件。

邮递员请求截图（错误）：

邮递员请求截图（正确方法）：

查看字段顺序的差异。 始终在请求内容的最后附加媒体文件。

我几乎花了 2 个小时才找到这个。 绝对工作。 就试一试吧。

Answer 3

我在 post 函数的末尾解决了移动req.body的问题：

app.post('/api/upload?:test',function(req,res){

    upload(req,res,function(err) {
        if(err) {
            return res.end("Error uploading file.");
        }
        res.end("File is uploaded");
    console.log(req.body);

    });
});

如果有人能告诉我为什么我会很乐意学习新事物！ 但是，现在，我解决了！

Answer 4

将您的console.log(req.body) upload(req,res,function(err) {...})

默认的 express body-parser 不能与 multipart/form-data 一起使用，因此我们使用 multer 来解析可以在上传函数中访问的表单数据。

Answer 5

万一其他人带着像下面这样稍微复杂的初始布局来到这里，将上传功能移动到每个路由的文件中并在那里使用它们似乎已经为我解决了这个问题。 为什么会这样喜怒无常，我不知道，老实说，这让我很头疼。

应该注意的是，我有一个自定义存储引擎将文件流式传输到磁盘，这可能导致了这个问题，但它只发生在 1 个特定路由上，该路由在功能上与其他几个完美运行的路由相同。

希望有一天这可以帮助其他人。

初始应用程序布局

应用程序.ts


import express from 'express';
import multer from 'multer';

import profilePicture from './routes/profile-picture.ts';

const upload = multer();

class Server {
    constructor() {
        this.app = express()
    }

    setRoutes() {
        this.app.use( '/upload', upload.single( 'profile' ), profilePicture );
    }

    // ... other methods
}

个人资料图片.ts

import { Router } from 'express';

const profilePicture = Router();

profilePicture.post( '/', ( req, res, next ) => {
    console.log( req.body ); // This was always empty, regardless of field order
    // do something with req
}

出于某种原因更新的布局

应用程序.ts

import express from 'express';

import profilePicture from './routes/profile-picture.ts';


class Server {
    constructor() {
        this.app = express()
    }

    setRoutes() {
        this.app.use( '/upload', profilePicture );
    }

    // ... other methods
}

个人资料图片.ts

import { Router } from 'express';
import multer from 'multer';

const upload = multer();

const profilePicture = Router();

profilePicture.post( '/', upload.single( 'profile' ), ( req, res, next ) => {
    console.log( req.body ); // No longer empty, hooray!
    // do something with req
}

Answer 6

您可以使用 javascript 手动重新排序字段，以确保在文件之前发送字段。

Node.js，multer 和 req.body 为空

问题描述

6 个解决方案

解决方案1
61 已采纳 2017-04-04 01:54:08

解决方案2
16 2020-07-04 06:57:10

解决方案3
13 2016-09-20 10:29:49

解决方案4
1 2021-09-25 06:47:56

解决方案5
0 2022-04-14 08:00:15

初始应用程序布局

应用程序.ts

个人资料图片.ts

出于某种原因更新的布局

应用程序.ts

个人资料图片.ts

解决方案6
0 2022-12-22 18:08:57

Node.js，multer 和 req.body 为空

问题描述

6 个解决方案

解决方案1 61 已采纳 2017-04-04 01:54:08

解决方案2 16 2020-07-04 06:57:10

解决方案3 13 2016-09-20 10:29:49

解决方案4 1 2021-09-25 06:47:56

解决方案5 0 2022-04-14 08:00:15

初始应用程序布局

应用程序.ts

个人资料图片.ts

出于某种原因更新的布局

应用程序.ts

个人资料图片.ts

解决方案6 0 2022-12-22 18:08:57

解决方案1
61 已采纳 2017-04-04 01:54:08

解决方案2
16 2020-07-04 06:57:10

解决方案3
13 2016-09-20 10:29:49

解决方案4
1 2021-09-25 06:47:56

解决方案5
0 2022-04-14 08:00:15

解决方案6
0 2022-12-22 18:08:57