express使用multer上传数据和图片信息

本文介绍如何在Express项目中结合Mongoose和Multer中间件上传文章及图片信息到数据库。 Multer用于处理multipart/form-data类型的表单数据,包括图片上传。在app.js中配置了静态目录以存放上传的图片。然而遇到一个问题:即使图片大小或格式不满足条件,multer仍会上传图片,目前尚未找到阻止无效图片上传的解决方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  • express项目中使用mongoose
  • 通过npm中间件multer上传文章信息以及图片地址
  • 将上传的信息存进数据库

image.js
引入multer中间件声明multer对象upload

var express = require('express')
var router = express.Router()
var multer = require('multer')
var image = require('../db/models/imageModel')

var storage = multer.diskStorage({
  // 设置文件路径,
  destination: function (req, file, cb) {
    cb(null, 'public/images')
  },
  // 制定文件名
  filename: function (req, file, cb) {
    // 获取后缀名
    let ext = file.originalname.split('.')[1]
    cb(null, file.fieldname + '-' + Date.now() + '.' + ext)
  }
})
// multer对象upload
var upload = multer({ storage: storage })
// 上传文件post方法,image为要上传内容的key值:前后端必须统一
// upload.single()接受一个文件的上传
router.post('/upload', upload.single('img'), (req, res) => {
  // 上传图片的信息在req.file中
  let { size, destination,filename , mimetype } = req.file
  let { date } = req.body
  // 将图片的静态路径拼接返回 __此处有坑
  // 因为req.file中的path路径中使用两个反斜杠分割,致使存入数据库的url在前端页面引用出错
  // 暂时解决方案:将本地端口、图片文件路径、图片名称拼接
  req.body.img_url = 'http://127.0.0.1:3000' + '/' + destination + '/' + filename
  console.log(req.body.img_url)
  let insert = req.body
  // 允许上传图片的媒体类型
  let types = ['jpg', 'jpeg', 'png']
  let tmpType = mimetype.split('/')[1]
  if(size >= 1000000) {
    return res.send({ err: -1, msg: '图片大小不能大于1000000b' })
  } else if(types.indexOf(tmpType) == -1) {
    return res.send({ err: -2, msg: '图片类型错误' })
  } else {
    // 判断图片是否存在(这里进行判重)
    image.find({ date: date })
      .then((data) => {
        if(data.length === 0) {
        // 不存在时,插入数据
          image.insertMany( insert )
            .then(() => {
              res.send({ err: 0, msg: '上传成功' })
            })
            .catch(() => {
              res.send({ err: 0, msg: '上传失败' })
            })
        } else {
          return res.send({ err: 0, msg: '上传失败,数据库中已存在当天内容' })
        }
      })
      .catch(() => {
        res.send({ err: -1, msg: '上传内容格式有误' })
      })
  }
})
// GET方式返回所有image集合数据
router.get('/find', (req, res) => {
  image.find()
    .then((data) => {
      res.send({ err: 0, msg: 'ok', data: data })
    }).catch((err) => {
      res.send({err: -1, msg: 'failed'})
  })
})
module.exports = router

imageModel.js

var mongoose = require('mongoose')
// 实例化一个Schema对象
// String, Number, Date, Buffer, Boolean, Mixed, ObjectId, Array // 所有类型
var imageSchema = mongoose.Schema({
  id: { type: Number, required: true }, // id 必须
  date: { type: String, required: true }, // 日期 必须
  title: { type: String, required: true }, // 标题 必须
  img_url: { type: String, required: true }, // 图片 必须
  content: { type: String, required: true }, // 文本内容 必须
  picture_author: { type: String, default: '佚名' }, // 图片作者 默认:佚名
  text_author: { type: String, default: '佚名' }, // 文本作者 默认:佚名
  category: { type: Number, default: 0 }, // 分类 默认:0
})
// 将Schema对象转换为Model,对应images集合
var imageSchema = mongoose.model('images', imageSchema)

module.exports = imageSchema

要在app.js中指定静态目录,存放上传的图片

// 生成静态目录
app.use('/public', express.static(path.join(__dirname, 'public')));

以上有巨坑:
使用multer时,判断图片大小、格式是否符合条件时,无论是否判断失败,multer都执行上传图片,而return 并没有起到作用。想要停止图片的上传应该有特定的方法,暂时还没解决…



     路漫漫其修远兮,吾将上下而求索!
     
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值