express使用multer插件
在不使用三方中间件的情况下,虽然可以使用
form
表单上传文件,但是无法将文件保存到静态文件资源目录中去
- 第一步:安装
multer
;npm install multer --save
- 第二步:引入
multer
;const multer = require('multer')
- 第三步:实例化
multer
- 第四步:在路由中使用
使用
multer
的时候,需要在form
表单上配置enctype="multipart/form-data"
multer
配置的文件存储路径,必须要存在,否则会报错
单文件上传,使用upload.single
函数,结果返回到req
的file
字段中
多文件上传,使用upload.array
函数,结果返回到req
的files
字段中
const upload = multer({dest: './public/uploads'})
// single函数的参数是form表单文件提交的字段
app.post("/file/upload", upload.single('avatar'), (req, res) => {
const { body, file } = req
res.send(body, file)
})
// array函数的参数是form表单文件提交的字段,以及设置文件上传的个数,
// 设置的文件上传一定要大于实际上传的文件的个数,否则会报错
app.post("/file/upload", upload.array('avatar', 12), (req, res) => {
const { body, files } = req
res.send(body, files)
})
自定义multer配置
利用
multer
的配置,可以实现按照日期动态生成文件夹,并修改默认上传文件的文件名和格式
需要引入path
,mkdirp
,以及silly-datetime
插件的支持
const path = require('path')
const mkdirp = require('mkdirp')
const sd = require("silly-datetime")
const storage = multer.diskStorage({
destination: async function (req, file, cb) {
// 1. 获取当前日期
let day = sd.format(new Date(), "YYYYMMDD")
// 2. 拼接目录
let dir = path.join("./public/uploads", day)
// 3. 按照日期生成图片存储目录 mkdirp是异步方法
await mkdirp(dir)
cb(null, dir)
},
filename: function (req, file, cb) {
// 1. 获取文件后缀名
let extName = path.extname(file.originalname)
// 2. 根据时间戳生成文件名
const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9)
cb(null, file.fieldname + '-' + uniqueSuffix + extName)
}
})
const upload = multer({ storage: storage })
multer实现多字段文件上传
利用
upload.fields
可以接受多个字段的文件上传
<form action="/doUpload" method="post" enctype="multipart/form-data">
标题:<input type="text" name="title">
<br>
图片1:<input type="file" name="pic1" id="pic1" multiple>
<br>
图片2:<input type="file" name="pic2" id="pic2" multiple>
<br>
内容:<textarea name="desc" id="desc" cols="30" rows="10"></textarea>
<br>
<button type="submit">提交</button>
</form>
app.post("/doBatchUpload", upload.fields([
{ name: 'pic1', maxCount: 1 },
{ name: 'pic2', maxCount: 8 }
]), (req, res) => {
// files的数据结构
// files: {
// 'pic1': [{}],
// 'pic2': [{}, {}]
// }
res.send({
body: req.body,
files: req.files
})
})