如何使用express-fileupload将图片与表单数据提交至数据库？

前端核心修正点 #

• 表单必须设置enctype="multipart/form-data"，这是文件上传的必要配置
• 提交时使用原生FormData对象封装数据，Axios请求不要手动设置Content-Type，浏览器会自动生成正确的头部

修正后的前端代码示例 #

<form id="uploadForm" enctype="multipart/form-data">
  <input type="text" name="title" placeholder="标题">
  <input type="file" name="image" accept="image/*">
  <button type="submit">提交</button>
</form>

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
document.getElementById('uploadForm').addEventListener('submit', async (e) => {
  e.preventDefault();
  const formData = new FormData(e.target);
  
  try {
    await axios.post('/api/upload', formData);
    alert('提交成功');
  } catch (err) {
    console.error(err);
    alert('提交失败');
  }
});
</script>

后端核心修正点 #

• 正确初始化express-fileupload中间件，开启必要配置（如自动创建目录、文件大小限制）
• 数据库存储图片分两种方案：直接存文件Buffer，或先存服务器本地再存文件路径，需对应处理
• 必须校验上传文件是否存在，避免空值报错

修正后的后端代码示例（MongoDB 存Buffer方案） #

const express = require('express');
const fileUpload = require('express-fileupload');
const mongoose = require('mongoose');
const app = express();

// 初始化文件上传中间件
app.use(fileUpload({
  createParentPath: true,
  limits: { fileSize: 5 * 1024 * 1024 } // 限制5MB以内的图片
}));

// 连接数据库
mongoose.connect('mongodb://localhost:27017/imageDB')
  .then(() => console.log('数据库连接成功'))
  .catch(err => console.error(err));

// 定义数据模型
const ImageSchema = new mongoose.Schema({
  title: String,
  image: {
    data: Buffer,
    contentType: String
  }
});
const ImageModel = mongoose.model('Image', ImageSchema);

// 处理上传请求
app.post('/api/upload', async (req, res) => {
  try {
    // 校验文件是否存在
    if (!req.files?.image) {
      return res.status(400).send('请选择要上传的图片');
    }

    const { title } = req.body;
    const imageFile = req.files.image;

    // 封装数据库数据
    const newImage = new ImageModel({
      title,
      image: {
        data: imageFile.data,
        contentType: imageFile.mimetype
      }
    });

    await newImage.save();
    res.status(200).send('图片已成功存入数据库');
  } catch (err) {
    console.error(err);
    res.status(500).send('服务器处理失败');
  }
});

app.listen(3000, () => console.log('服务器运行在端口3000'));

备选：存文件路径到数据库 #

如果不想直接存Buffer，可先将文件保存到服务器目录，再存路径：

// 替换上传请求处理部分
app.post('/api/upload', async (req, res) => {
  try {
    if (!req.files?.image) {
      return res.status(400).send('请选择要上传的图片');
    }

    const { title } = req.body;
    const imageFile = req.files.image;
    const savePath = `./uploads/${Date.now()}-${imageFile.name}`;

    // 保存文件到服务器
    await imageFile.mv(savePath);

    // 存路径到数据库
    const newImage = new ImageModel({
      title,
      imagePath: savePath
    });

    await newImage.save();
    res.status(200).send('图片已成功存入数据库');
  } catch (err) {
    console.error(err);
    res.status(500).send('服务器处理失败');
  }
});

必查验证项 #

• 前端：检查FormData是否包含文件（可通过console.log([...formData.entries()])查看）
• 后端：检查req.files是否能获取到上传的文件对象
• 数据库：确认字段类型匹配（Buffer对应MongoDB的BinData类型，路径对应String类型）

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