Node.js中基于Multer和MongoDB实现图片上传的完整教程-js教程-PHP中文网

Node.js中基于Multer和MongoDB实现图片上传的完整教程

霞舞

发布： 2025-11-15 16:08:15

原创

718人浏览过

Node.js中基于Multer和MongoDB实现图片上传的完整教程

在现代Web应用中，图片上传是常见且重要的功能。本教程将引导您在Node.js Express环境中，利用Multer中间件处理图片文件，并将其存储路径持久化到MongoDB数据库。我们将通过一个博客应用的示例来详细阐述从前端表单到后端逻辑的完整实现过程。

1. 前端表单设置

首先，确保您的html表单正确配置，以便能够上传文件。关键在于设置enctype="multipart/form-data"属性，并使用input type="file"元素。

<!-- _form_fields.ejs -->
<form method="POST" action="/articles" 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 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>

登录后复制

注意事项：

enctype="multipart/form-data"：这是文件上传的必需属性。
name="image"：此名称将用于后端Multer中间件识别上传的文件。

2. Multer配置与文件存储

Multer是一个Node.js中间件，用于处理multipart/form-data类型的请求，主要用于文件上传。我们需要配置Multer的存储引擎，指定文件保存的目录和文件名生成规则。

// routes/articles.js
const express = require('express');
const Article = require('./../models/article');
const router = express.Router();
const multer = require('multer');
const path = require('path'); // 用于处理文件路径

// 配置Multer的磁盘存储引擎
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    // 指定文件上传的目录。确保此目录存在且可写。
    cb(null, 'public/uploads/'); 
  },
  filename: (req, file, cb) => {
    // 生成一个唯一的文件名，以避免文件冲突
    const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1e9);
    const extension = path.extname(file.originalname); // 获取原始文件的扩展名
    cb(null, uniqueSuffix + extension); // 组合唯一后缀和扩展名作为新文件名
  },
});

// 初始化Multer上传实例
const upload = multer({ storage: storage });

登录后复制

解释：

multer.diskStorage()：指定文件将存储在服务器的磁盘上。
destination：一个函数，用于确定文件应该存储在哪个文件夹。cb(null, 'public/uploads/')表示文件将保存在项目根目录下的public/uploads/文件夹中。
filename：一个函数，用于确定文件中在目标文件夹中的名称。我们使用时间戳和随机数生成一个唯一的文件名，并保留原始文件的扩展名。

3. 后端路由与Multer中间件集成

在Express路由中集成Multer是实现图片上传的关键步骤。Multer中间件必须在处理文件数据的其他中间件之前运行。

// routes/articles.js

// ... (之前的require和Multer配置代码) ...

// 用于保存文章并重定向的辅助函数
const saveArticleAndRedirect = (path) => {
  return async (req, res, next) => {
    let article = req.article;
    article.title = req.body.title;
    article.description = req.body.description;
    article.markdown = req.body.markdown;

    try {
      // 检查是否有文件上传
      if (req.file) {
        // Multer已经将文件保存到磁盘，req.file包含文件元数据
        // 我们将文件在服务器上的相对路径存储到数据库中
        // 例如：/uploads/1686845869591-191454535.jpg
        const imageRelativePath = `/uploads/${req.file.filename}`;
        article.image = imageRelativePath;
      }

      article = await article.save();
      res.redirect(`/articles/${article.slug}`);
    } catch (e) {
      console.error("保存文章失败:", e);
      // 如果保存失败，考虑删除已上传的文件以避免垃圾文件
      // fs.unlinkSync(req.file.path); // 需要引入fs模块
      res.render(`articles/${path}`, { article: article, error: e.message });
    }
  };
};

// ... (isAdmin函数和GET /new路由) ...

// POST /articles 路由处理新文章创建和图片上传
router.post(
  '/', 
  upload.single('image'), // Multer中间件，处理名为'image'的单个文件
  async (req, res, next) => {
    // Multer处理后，文件信息会存储在req.file中
    if (!req.file) {
      console.log('未接收到文件！');
    } else {
      console.log('文件已接收并处理:', req.file);
    }
    req.article = new Article(); // 创建新的文章实例
    next(); // 继续到下一个中间件（saveArticleAndRedirect）
  }, 
  saveArticleAndRedirect('new')
);

登录后复制

关键点：

upload.single('image')：这是Multer中间件，它会在请求到达async (req, res, next) => {...}之前执行。'image'参数必须与前端表单中input type="file"的name属性值一致。
当upload.single('image')执行成功后，上传的文件信息（包括其在服务器上的存储路径）将存储在req.file对象中。
saveArticleAndRedirect函数中，我们不再需要手动调用req.file.mv，因为Multer的diskStorage已经处理了文件的保存。我们只需从req.file中获取文件名，并构造一个相对路径存储到数据库。

4. MongoDB Mongoose Schema定义

为了在MongoDB中存储图片的路径，我们需要在Mongoose模型中添加一个字段来保存这个路径。

Cutout老照片上色

Cutout.Pro推出的黑白图片上色

查看详情

// models/article.js
const mongoose = require('mongoose')
const marked = require('marked')
const slugify = require('slugify')
const createDomPurify = require('dompurify')
const { JSDOM } = require('jsdom')
const dompurify = createDomPurify(new JSDOM().window)

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 // 用于存储图片文件的相对路径
  }
})

articleSchema.pre('validate', function(next) {
  if (this.title) {
    this.slug = slugify(this.title, { lower: true, strict: true })
  }

  if (this.markdown) {
    this.sanitizedHtml = dompurify.sanitize(marked.parse(this.markdown))
  }

  next()
})

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

登录后复制

解释：

image: { type: String }：这个字段将用于存储上传图片在服务器上的相对URL路径（例如：/uploads/your_image.jpg）。

5. 部署与静态文件服务

为了让浏览器能够访问上传的图片，您需要将Multer存储图片的目录（例如public/uploads）配置为Express的静态文件服务目录。

// app.js (或您的主Express应用文件)
const express = require('express');
const app = express();
// ... 其他中间件配置 ...

// 配置静态文件服务，使public目录下的文件可以通过URL访问
app.use(express.static('public')); 
// 这意味着如果图片存储在 public/uploads/image.jpg，
// 那么在前端可以通过 /uploads/image.jpg 访问

登录后复制