前端提交含文件表单后，后端如何提取req.body值并存入MongoDB？

一、修复前端请求头问题 #

当用FormData提交包含文件的表单时，禁止手动设置Content-Type: application/x-www-form-urlencoded——该格式不支持文件上传，且会破坏FormData的默认编码逻辑。需让浏览器自动生成multipart/form-data请求头，才能保证后端正确解析数据。

HTML表单示例 #

<form id="userForm">
  <input type="text" name="name" placeholder="姓名" required>
  <input type="text" name="surname" placeholder="姓氏" required>
  <input type="file" name="userFile" required>
  <button type="submit">提交</button>
</form>

JavaScript Fetch请求示例 #

document.getElementById('userForm').addEventListener('submit', async (e) => {
  e.preventDefault();
  const formData = new FormData(e.target);
  
  try {
    const response = await fetch('http://localhost:4000/add', {
      method: 'POST',
      body: formData // 无需手动设置Content-Type，浏览器会自动处理
    });
    const result = await response.json();
    console.log(result);
  } catch (err) {
    console.error('提交失败:', err);
  }
});

二、后端配置（Express + Mongoose + Multer） #

1. 安装依赖 #

npm install express mongoose multer

2. 配置Multer处理文件上传 #

Multer会自动解析multipart/form-data请求，将文本字段存入req.body，文件信息存入req.file（单文件场景）或req.files（多文件场景）。

内存存储（仅获取文件名，不保存文件到磁盘）

const express = require('express');
const mongoose = require('mongoose');
const multer = require('multer');

const app = express();

// 配置内存存储，仅保留文件元信息
const storage = multer.memoryStorage();
const upload = multer({ storage: storage });

// 若需将文件保存到磁盘，改用以下配置：
// const storage = multer.diskStorage({
//   destination: (req, file, cb) => {
//     cb(null, './uploads'); // 确保项目根目录下存在uploads文件夹
//   },
//   filename: (req, file, cb) => {
//     cb(null, Date.now() + '-' + file.originalname); // 重命名避免文件名冲突
//   }
// });
// const upload = multer({ storage: storage });

3. 定义Mongoose数据模型 #

const mongoose = require('mongoose');

const userSchema = new mongoose.Schema({
  name: { type: String, required: true },
  surname: { type: String, required: true },
  fileName: { type: String, required: true } // 存储上传文件的原始文件名或保存后的文件名
});

const User = mongoose.model('User', userSchema);

4. 编写路由处理请求 #

使用upload.single('userFile')处理单个文件上传，文本字段自动存入req.body，文件信息存入req.file：

// 连接MongoDB
mongoose.connect('mongodb://localhost:27017/userDB')
  .then(() => console.log('MongoDB连接成功'))
  .catch(err => console.error('MongoDB连接失败:', err));

// 处理/add路由
app.post('/add', upload.single('userFile'), async (req, res) => {
  try {
    // 从req.body提取文本字段
    const { name, surname } = req.body;
    // 从req.file提取文件原始文件名
    const fileName = req.file.originalname;

    // 创建并保存用户文档到MongoDB
    const newUser = new User({
      name,
      surname,
      fileName
    });
    await newUser.save();

    res.status(200).json({ message: '数据保存成功', user: newUser });
  } catch (err) {
    res.status(500).json({ error: '保存失败', details: err.message });
  }
});

app.listen(4000, () => console.log('服务器运行在http://localhost:4000'));

关键问题说明 #

1. 前端请求头错误：手动设置x-www-form-urlencoded会导致Express默认解析器无法正确解析FormData，进而出现req.body结构异常、无法直接访问字段的问题，去掉手动设置的请求头即可解决。
2. Multer配置误区：若使用upload.fields()处理多文件，需仅指定文件字段（文本字段无需配置），此时文件信息会存于req.files[字段名][0]；单文件场景用upload.single()更简洁。

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