Express 结合 multer 上传图片

一、 Multer 模块介绍

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

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

安装 multer npm install --save multer
引入配置 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 
})

使用 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.获取当前日期 20210417let 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.获取当前日期 20210417let 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