Node.js中使用Multer和MongoDB实现图片上传与路径存储

<!-- new.ejs 或 _form_fields.ejs -->
<div class="container">
    <h1 class="mb-4">新建文章</h1>

    <!-- 确保 form 标签有 enctype="multipart/form-data" -->
    <form action="/articles" method="POST" enctype="multipart/form-data">
        <div class="form-group">
            <label for="title">标题</label>
            <input required value="<%= article.title %>" type="text" name="title" id="title" class="form-control">
        </div>

        <div class="form-group">
            <label for="description">描述</label>
            <textarea name="description" id="description" class="form-control"><%= article.description %></textarea>
        </div>

        <div class="form-group">
            <label for="markdown">内容 (Markdown)</label>
            <textarea required name="markdown" id="markdown" class="form-control"><%= article.markdown %></textarea>
        </div>

        <div class="form-group">
            <label for="image">图片</label>
            <!-- 这是文件上传的核心 input 元素 -->
            <input type="file" name="image" id="image" class="form-control">
        </div>

        <a href="/" class="btn btn-secondary">取消</a>
        <button type="submit" class="btn btn-primary">保存</button>
    </form>
</div>

// routes/articles.js 或单独的 Multer 配置文件
const multer = require('multer');
const path = require('path');

// 配置 Multer 的磁盘存储引擎
const storage = multer.diskStorage({
  // destination 决定文件存储的目录
  destination: (req, file, cb) => {
    // 'public/uploads/' 是文件将被保存的服务器本地路径
    // 确保该目录存在，否则Multer会报错
    cb(null, 'public/uploads/');
  },
  // filename 决定文件中在目标目录中的名称
  filename: (req, file, cb) => {
    // 生成一个唯一的文件名，防止文件冲突
    const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1e9);
    // 获取原始文件的扩展名
    const extension = path.extname(file.originalname);
    // 组合成最终的文件名
    cb(null, uniqueSuffix + extension);
  },
});

// 创建 Multer 实例
// upload 实例将作为 Express 路由的中间件使用
const upload = multer({ storage: storage });

module.exports = upload; // 如果是单独文件，则导出
// 或者在当前文件内直接使用

// models/article.js
const mongoose = require('mongoose');
// ... 其他引入

const articleSchema = new mongoose.Schema({
  title: {
    type: String,
    required: true
  },
  description: {
    type: String
  },
  markdown: {
    type: String,
    required: true
  },
  createdAt: {
    type: Date,
    default: Date.now
  },
  slug: {
    type: String,
    required: true,
    unique: true
  },
  sanitizedHtml: {
    type: String,
    required: true
  },
  // 新增的图片路径字段
  image: {
    type: String // 存储图片文件的相对路径
  }
});

// ... 其他 pre/post 钩子

module.exports = mongoose.model('Article', articleSchema);

// routes/articles.js
const express = require('express');
const Article = require('./../models/article');
const router = express.Router();
// 引入 Multer 配置
const upload = require('../path/to/multerConfig'); // 假设 Multer 配置在单独文件并导出

// ... isAdmin 中间件定义

// 用于保存文章并重定向的通用函数
const saveArticleAndRedirect = (path) => {
  return async (req, res, next) => {
    // 确保 req.article 存在，如果不存在则创建一个新的
    let article = req.article || new Article();

    article.title = req.body.title;
    article.description = req.body.description;
    article.markdown = req.body.markdown;

    try {
      // 检查是否有文件上传
      if (req.file) {
        // 当使用 diskStorage 时，Multer 已经将文件保存到 destination 目录
        // req.file.path 包含了 Multer 保存文件的完整路径（例如：publicuploadsunique-filename.jpg）
        // 为了存储到数据库并方便前端访问，我们通常存储相对路径
        // 例如，如果 static 目录设置为 'public'，那么数据库中可以存储 'uploads/unique-filename.jpg'
        const imageRelativePath = req.file.path.replace(/\/g, '/').split('public/')[1];
        article.image = imageRelativePath;
      }

      article = await article.save();
      res.redirect(`/articles/${article.slug}`);
    } catch (e) {
      console.error('保存文章失败:', e);
      // 如果保存失败，可能需要删除已上传的文件以避免垃圾文件
      // 但本示例为简化流程，暂不实现文件回滚
      res.render(`articles/${path}`, { article: article, error: e.message });
    }
  };
};

// GET 请求：显示创建新文章的表单
router.get('/new', isAdmin, (req, res) => {
  res.render('articles/new', { article: new Article() });
});

// POST 请求：处理新文章的创建，包括图片上传
router.post(
  '/',
  isAdmin, // 确保用户是管理员
  upload.single('image'), // Multer 中间件，处理名为 'image' 的单个文件上传
  async (req, res, next) => {
    // 在这里，req.file 包含了上传文件的信息（如果存在）
    if (req.file) {
      console.log('文件已接收:', req.file);
    } else {
      console.log('未接收到文件！');
    }
    // 为 saveArticleAndRedirect 准备 article 实例
    req.article = new Article();
    next(); // 继续到下一个中间件 (saveArticleAndRedirect)
  },
  saveArticleAndRedirect('new')
);

module.exports = router;

// app.js 或主服务器文件
const express = require('express');
const app = express();
// ... 其他引入和中间件

// 配置 Express 提供静态文件服务
// 这意味着任何请求到 /uploads/filename.jpg 都会从 public/uploads/ 目录中查找文件
app.use(express.static('public'));

// ... 路由设置