Express服务器无法获取客户端上传文件问题求助

客户端Pug代码 #

doctype html
html
    head
        title Test
    body
        form(action=`${baseRoute}/api/users/${nick}/generate` enctype="multipart/form-data" method='POST')
            input(type='file' accept="image/png, image/jpeg" id='profile_picture' name='image')
            input(type='submit', value='Load')

后端Express初始代码 #

const express = require('express');
const app = express();
const multer = require('multer');
const upload = multer({ dest: 'uploads/' });

app.set('views', 'views');
app.set('view engine', 'pug');

app.get('/', function(req, res, next) {
  res.redirect('/test/update_user');
});

app.post('/api/users/:nick/generate', upload.single('image'), async function(req, res, next) {
  console.log("GENERATE USER");
  console.log(req.files);
  res.send("Success");
});

app.get('/test/update_user', function(req, res, next) {
  let params = {
    baseRoute: "",
    nick: 'somenick',
  };
  res.render('test/update_user', params);
});

app.listen(3000, () => {
  console.log("go to localhost:3000/test/update_user");
});

问题原因与修复方案 #

1. req.files 输出undefined的解决 #

使用upload.single('image')处理单个文件上传时，multer会将文件信息存入**req.file（单数）**，req.files仅适用于多文件上传场景（如upload.array()或upload.fields()）。

修复：将代码中的console.log(req.files)替换为console.log(req.file)，即可获取单个文件的完整信息（包括原文件名、存储路径、文件大小等）。

2. 上传文件无扩展名的解决 #

multer默认存储配置不会保留原文件扩展名，需自定义存储引擎来添加扩展名：

const multer = require('multer');
const path = require('path');

// 自定义存储规则
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, 'uploads/'); // 指定文件保存目录
  },
  filename: (req, file, cb) => {
    // 生成唯一文件名：时间戳+随机数+原文件扩展名
    const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9);
    cb(null, uniqueSuffix + path.extname(file.originalname));
  }
});

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

完整修复后的后端代码 #

const express = require('express');
const app = express();
const multer = require('multer');
const path = require('path');

// 自定义multer存储配置
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, 'uploads/');
  },
  filename: (req, file, cb) => {
    const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9);
    cb(null, uniqueSuffix + path.extname(file.originalname));
  }
});

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

app.set('views', 'views');
app.set('view engine', 'pug');

app.get('/', function(req, res, next) {
  res.redirect('/test/update_user');
});

app.post('/api/users/:nick/generate', upload.single('image'), async function(req, res, next) {
  console.log("GENERATE USER");
  console.log(req.file); // 改为req.file获取单个文件信息
  res.send("Success");
});

app.get('/test/update_user', function(req, res, next) {
  let params = {
    baseRoute: "",
    nick: 'somenick',
  };
  res.render('test/update_user', params);
});

app.listen(3000, () => {
  console.log("go to localhost:3000/test/update_user");
});

内容的提问来源于stack exchange，提问作者Efim Rubin