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模型中添加一个字段来保存这个路径。
// 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 访问总结
通过以上步骤，您已经成功地在Node.js Express应用中实现了图片上传功能。核心要点包括：
- 前端表单：使用enctype="multipart/form-data"和input type="file"。
- Multer配置：设置diskStorage来定义文件保存路径和命名规则。
- Multer中间件集成：在Express路由中使用upload.single('fieldname')，确保它在处理请求体的其他中间件之前执行。
- 后端逻辑：在Multer处理文件后，通过req.file获取文件信息，并将其相对路径存储到MongoDB。
- Mongoose Schema：在模型中添加一个字符串字段来保存图片路径。
- 静态文件服务：配置Express来提供上传图片所在的目录，使其可以通过URL访问。
遵循这些步骤，您将能够构建一个健壮的图片上传系统，并有效管理上传的文件。在生产环境中，您可能还需要考虑文件验证、错误处理、图片优化（如压缩、缩放）以及使用云存储服务（如AWS S3、七牛云等）来替代本地磁盘存储。
