Express 结合 multer 上传图片

一、 Multer 模块介绍

Multer 是一个 node.js 中间件,用于处理 multipart/form-data 类型的表单数据,它主要用 于上传文件。
它是写在 busboy 之上非常高效。
注意: Multer 不会处理任何非 multipart/form-data 类型的表单数据。
https://www.npmjs.com/package/multer

二、 Express 上传文件模块 multer 的使用

  1. 安装 multer npm install --save multer
  2. 引入配置 multer 模块 :
var multer = require('multer') //配置 
var storage = multer.diskStorage({ 
	//文件保存路径 注意路径必须存在
	destination: function (req, file, cb) { 
		cb(null, 'public/upload/') 
		},
	//修改文件名称 
	filename: function (req, file, cb) { 
		var fileFormat = (file.originalname).split("."); 
		cb(null,Date.now() + "." + fileFormat[fileFormat.length - 1]); 
		} 
	})
var upload = multer({ 
	storage: storage 
})
  1. 使用 multer
router.post('/doAdd', upload.single("pic"), function (req, res) { 
	res.send({ 
		file: req.file,//返回文件名 
		body: req.body 
		}) 
	});
第一种使用方式:无法指定上传文件的后缀名

在这里插入图片描述

在这里插入图片描述

第二种:可以指定文件的后缀名

在这里插入图片描述

const express = require("express")
var multer  = require('multer')
const path = require('path')
// var upload = multer({ dest: 'static/upload' }) 
// 上传文件之前目录必须存在
var storage = multer.diskStorage({
    // 配置上传的文件保存的目录
    destination: function (req, file, cb) {
      cb(null, 'static/upload')
    },
    // 修改上传的文件的文件名
    filename: function (req, file, cb) {
        // 1.获取后缀名
        let extname = path.extname(file.originalname)

        // 2.根据时间戳生成文件名
      cb(null, Date.now()+ "." + extname)
    }
  })
var upload = multer({ storage: storage })
var router = express.Router()
router.get("/",(req, res)=> {
    res.send("导航列表")
})
router.get("/add",(req, res)=> {
    res.render("admin/nav/add.html")
})
router.post("/doAdd", upload.single("pic") ,(req, res)=> {
    // 获取表单传过来的数据
    var body = req.body;
    console.log(body)
    console.log(req.file)
    res.send({
        body: req.body,
        file: req.file
    })
})

router.get("/edit",(req, res)=> {
    res.send("修改导航")
})

router.post("/doEdit",(req, res)=> {
    res.send("执行修改导航")
})

module.exports = router

在这里插入图片描述
tool.js :

var multer = require('multer')
const path = require('path')

let tools = {
    multer() {
        // var upload = multer({ dest: 'static/upload' }) 
        // 上传文件之前目录必须存在
        var storage = multer.diskStorage({
            // 配置上传的文件保存的目录
            destination: function (req, file, cb) {
                cb(null, 'static/upload')
            },
            // 修改上传的文件的文件名
            filename: function (req, file, cb) {
                // 1.获取后缀名
                let extname = path.extname(file.originalname)

                // 2.根据时间戳生成文件名
                cb(null, Date.now() + "." + extname)
            }
        })
        var upload = multer({ storage: storage })
        return upload
    }
}


module.exports = tools

nav.js:

const express = require("express")
const tool = require("../../model/tool")

var router = express.Router()
router.get("/",(req, res)=> {
    res.send("导航列表")
})
router.get("/add",(req, res)=> {
    res.render("admin/nav/add.html")
})
router.post("/doAdd", tool.multer().single("pic") ,(req, res)=> {
    // 获取表单传过来的数据
    var body = req.body;
    console.log(body)
    console.log(req.file)
    res.send({
        body: req.body,
        file: req.file
    })
})
// var multer  = require('multer')
// const path = require('path')
// // var upload = multer({ dest: 'static/upload' }) 
// // 上传文件之前目录必须存在
// var storage = multer.diskStorage({
//     // 配置上传的文件保存的目录
//     destination: function (req, file, cb) {
//       cb(null, 'static/upload')
//     },
//     // 修改上传的文件的文件名
//     filename: function (req, file, cb) {
//         // 1.获取后缀名
//         let extname = path.extname(file.originalname)

//         // 2.根据时间戳生成文件名
//       cb(null, Date.now()+ "." + extname)
//     }
//   })
// var upload = multer({ storage: storage })


// router.post("/doAdd", upload.single("pic") ,(req, res)=> {
//     // 获取表单传过来的数据
//     var body = req.body;
//     console.log(body)
//     console.log(req.file)
//     res.send({
//         body: req.body,
//         file: req.file
//     })
// })

router.get("/edit",(req, res)=> {
    res.send("修改导航")
})

router.post("/doEdit",(req, res)=> {
    res.send("执行修改导航")
})

module.exports = router

三、 Express 按照日期生成上传文件目录

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

tool.js:

var multer = require('multer')
const path = require('path')
const sd = require('silly-datetime')
const mkdirp = require('mkdirp')

let tools = {
    multer() {
        // var upload = multer({ dest: 'static/upload' }) 
        // 上传文件之前目录必须存在
        var storage = multer.diskStorage({

            // 配置上传的文件保存的目录
            destination: async function (req, file, cb) {
                // 1.获取当前日期 20210417
                let day = sd.format(new Date(), 'YYYYMMDD')

                let dir = path.join('static/upload', day)
                // 2.按照日期生成图片存储目录
                await mkdirp(dir) // mkdirp()是一个异步方法

                cb(null, dir)
            },
            // 修改上传的文件的文件名
            filename: function (req, file, cb) {
                // 1.获取后缀名
                let extname = path.extname(file.originalname)

                // 2.根据时间戳生成文件名
                cb(null, Date.now() + "." + extname)
            }
        })
        var upload = multer({ storage: storage })
        return upload
    }
}


module.exports = tools

nav.js:

const express = require("express")
const tool = require("../../model/tool")

var router = express.Router()
router.get("/",(req, res)=> {
    res.send("导航列表")
})
router.get("/add",(req, res)=> {
    res.render("admin/nav/add.html")
})
router.post("/doAdd", tool.multer().single("pic") ,(req, res)=> {
    // 获取表单传过来的数据
    var body = req.body;
    console.log(body)
    console.log(req.file)
    res.send({
        body: req.body,
        file: req.file
    })
})
// var multer  = require('multer')
// const path = require('path')
// // var upload = multer({ dest: 'static/upload' }) 
// // 上传文件之前目录必须存在
// var storage = multer.diskStorage({
//     // 配置上传的文件保存的目录
//     destination: function (req, file, cb) {
//       cb(null, 'static/upload')
//     },
//     // 修改上传的文件的文件名
//     filename: function (req, file, cb) {
//         // 1.获取后缀名
//         let extname = path.extname(file.originalname)

//         // 2.根据时间戳生成文件名
//       cb(null, Date.now()+ "." + extname)
//     }
//   })
// var upload = multer({ storage: storage })


// router.post("/doAdd", upload.single("pic") ,(req, res)=> {
//     // 获取表单传过来的数据
//     var body = req.body;
//     console.log(body)
//     console.log(req.file)
//     res.send({
//         body: req.body,
//         file: req.file
//     })
// })

router.get("/edit",(req, res)=> {
    res.send("修改导航")
})

router.post("/doEdit",(req, res)=> {
    res.send("执行修改导航")
})

module.exports = router

四、实现多文件上传

在这里插入图片描述
在这里插入图片描述
add.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="/admin/user/doAdd" method="POST" enctype="multipart/form-data">
        标题:<input type="text" name="title" id="title">
        <br>
        <br>
        图片1<input type="file" name="pic1" id="pic1">
        <br>
        <br>
        图片2<input type="file" name="pic2" id="pic2">
        <br>
        <br>
        描述:<textarea name="desc" id="desc" cols="30" rows="10"></textarea>
        <br>
        <br>
        <input type="submit" value="提交">
    </form>
    
</body>
</html>

user.js :

const express = require("express")
const tool = require('../../model/tool')


var router = express.Router()



router.get("/",(req, res)=> {
    res.send("用户列表")
})

router.get("/add",(req, res)=> {
    res.render("admin/user/add.html")
})

let cpUpload = tool.multer().fields([{ name: 'pic1', maxCount: 1 }, { name: 'pic2', maxCount: 1 }])

router.post("/doAdd", cpUpload, (req, res)=> {
    res.send({
        body: req.body,
        files: req.files
    })
})

router.post("/doEdit",(req, res)=> {
    res.send("执行修改用户")
})


router.get("/edit",(req, res)=> {
    res.send("修改用户")
})

module.exports = router

tool.js:

var multer = require('multer')
const path = require('path')
const sd = require('silly-datetime')
const mkdirp = require('mkdirp')

let tools = {
    multer() {
        // var upload = multer({ dest: 'static/upload' }) 
        // 上传文件之前目录必须存在
        var storage = multer.diskStorage({

            // 配置上传的文件保存的目录
            destination: async function (req, file, cb) {
                // 1.获取当前日期 20210417
                let day = sd.format(new Date(), 'YYYYMMDD')

                let dir = path.join('static/upload', day)
                // 2.按照日期生成图片存储目录
                await mkdirp(dir) // mkdirp()是一个异步方法

                cb(null, dir)
            },
            // 修改上传的文件的文件名
            filename: function (req, file, cb) {
                // 1.获取后缀名
                let extname = path.extname(file.originalname)

                // 2.根据时间戳生成文件名
                cb(null, Date.now() + "." + extname)
            }
        })
        var upload = multer({ storage: storage })
        return upload
    }
}

module.exports = tools

在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值