Express中含图片的POST表单数据无法在控制台打印的问题

问题原因 #

你的代码核心问题是**express-fileupload中间件加载顺序错误**——它被放在了路由注册之后。Express中间件按注册顺序执行，当请求到达/admin/add-product路由时，文件上传中间件还未生效，无法解析multipart/form-data格式的表单，导致req.body为空。

另外，带文件的表单中，普通输入字段存放在req.body，图片文件数据存放在req.files中，需要分别读取才能获取完整表单内容。

修复步骤 #

1. 调整中间件顺序（修改app.js） #

将app.use(fileUpload())移到路由注册之前，确保请求先经过文件上传中间件处理：

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var hbs = require('express-handlebars')
var usersRouter = require('./routes/users');
var adminRouter = require('./routes/admin');
var fileUpload = require('express-fileupload')

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hbs');
app.engine('hbs', hbs.engine({ extname: 'hbs', defaultLayout: 'layout', layoutsDir: __dirname + '/views/layout/', partialsDir: __dirname + '/views/partials/' }))

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

// 把fileUpload中间件移到路由注册之前
app.use(fileUpload())
app.use('/', usersRouter);
app.use('/admin', adminRouter);

// catch 404 and forward to error handler
app.use(function (req, res, next) {
  next(createError(404));
});

// error handler
app.use(function (err, req, res, next) {
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

2. 修改路由处理逻辑（修改admin路由文件） #

在POST接口中同时打印req.body（普通表单字段）和req.files（图片文件数据）：

var express = require('express');
var router = express.Router();

router.get('/', function(req, res, next) {
  let products=[{
    name:"Iphone 15",category:"Mobile",discription:"flaghship phone by apple",image:"https://encrypted-tbn1.gstatic.com/shopping?q=tbn:ANd9GcR199XXubeTzwSceNjVSDZLSmAS9XKBkftsUbcSGADAGYXqqDRs17BYcd3jocTU_xeenejYWbzJbs394WBFqKBZOwJJcI3il9Pmcz8d3bA&usqp=CAE"
  },{
    name:"Samsung Galaxy S23 ultra",category:"Mobile",discription:"flaghship phone by Samsung",image:"https://encrypted-tbn0.gstatic.com/shopping?q=tbn:ANd9GcQ3uCOtqrOC3OSc1mveQKwrFN4bBVPsOk5FhSznuH-9bZMOU4qHs_-FYJscJ8nFGLDDZ3a_Cla-HCiHjkik3CaBRgsarJ-ZDKErAyLMLe2VRNBIeU1sti7Q&usqp=CAE"
  },{
    name:"Nothing phone 2",category:"Mobile",discription:"flaghship phone by NOthing",image:"https://encrypted-tbn0.gstatic.com/shopping?q=tbn:ANd9GcQvcN7cV_G4iXn6uy8_RoByjPj35Vh1MA0nDKFdg6YNep0EzLTbTsV40YqO1tKxxjFQl8DFOfDW1-vOFTEikA_ZdlrWh9WDwHeFIln0xDuuy2BQRp2wcl4ZTw&usqp=CAE"
  },{
    name:"MI 13 ultra",category:"Mobile",discription:"flaghship phone by apple",image:"https://encrypted-tbn0.gstatic.com/shopping?q=tbn:ANd9GcTv3moXySHfJ_y7ZuoC7S2gxrA2wWtvOe9Zw-YQiwX59uIBkR4IlZuptO9ThOnFiUGLSwpQjcOI8m0LCY19RMWJBcEn66jj_TioDlxIKCJgIekD60awjBYLIg&usqp=CAE"
  }]
  res.render('admin/view-products',{admin:true,products})
});
router.get('/add-product',function(req,res){
  res.render('admin/add-product')
})
router.post('/add-product',(req,res)=>{
  // 打印完整表单数据
  console.log('普通表单字段：', req.body);
  console.log('图片文件数据：', req.files);
  res.send('表单数据已接收');
})
module.exports = router;

验证效果 #

重启Express服务后提交表单，控制台会输出类似以下内容：

普通表单字段： { Name: '测试产品', Category: '数码', Price: '999', Discription: '测试描述' }
图片文件数据： { Image: { name: 'test.jpg', data: <Buffer ...>, size: 12345, encoding: '7bit', tempFilePath: '', truncated: false, mimetype: 'image/jpeg', md5: 'xxx', mv: [Function: mv] } }

内容的提问来源于stack exchange，提问作者Abay sankar s