在现代Web应用中，图片上传是常见且重要的功能。本教程将引导您在Node.js Express环境中，利用Multer中间件处理图片文件，并将其存储路径持久化到MongoDB数据库。我们将通过一个博客应用的示例来详细阐述从前端表单到后端逻辑的完整实现过程。
1. 前端表单设置
首先，确保您的html表单正确配置，以便能够上传文件。关键在于设置enctype=”multipart/form-data”属性，并使用input type=”file”元素。
<input required value="" type="text" name="title" id="title" class="form-control">取消
注意事项：
enctype=”multipart/form-data”：这是文件上传的必需属性。name=”image”：此名称将用于后端Multer中间件识别上传的文件。
2. Multer配置与文件存储
Multer是一个Node.js中间件，用于处理multipart/form-data类型的请求，主要用于文件上传。我们需要配置Multer的存储引擎，指定文件保存的目录和文件名生成规则。
// routes/articles.jsconst 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.jsconst 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、七牛云等）来替代本地磁盘存储。
以上就是Node.js中基于Multer和MongoDB实现图片上传的完整教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1539057.html
微信扫一扫 
支付宝扫一扫 
