一、 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.获取当前日期 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