文件上传 multer
- 安装
npm i multer
- 引入
const multer = require('multer')
- 使用
这里给出一个 form 表单案例的使用:
- 表单
// 表单的类型 必须是 multipart/form-data
<form action="/upload" enctype="multipart/form-data" method="post">
姓名:<input type="text" name="username"><br>
// 上传文件时 input 表单类型必须是 type
头像:<input type="file" name="avatar"><br>
<button type="submit">提交</button>
</form>
- 如果使用的是点击上传
// 点击事件
btn.addEventListener('click', () => {
// 要处理成表单对象上传
const formsdata = new FormData();
formsdata.append('username', username.value);
formsdata.append('password', password.value);
// 追加name值,和文件对象
formsdata.append('avatar', avatar.files[0]);
axios.post('/user/upload/avatar', formsdata, {
headers: {
'Content-Type': 'multipart/form-data',
},
}).then(res => {
document.querySelector('img').src = res.data.imgPath;
});
});
// 后端
const express = require('express')
const router = express.Router()
const multer = require('multer')
const UserModel = require('../../models/UserModles')
// const uplaoder = multer('public/uploads')
// 如果要添加保存时的文件后缀和文件路径,需要添加如下配置
const storage = multer.diskStorage({
destination: function (req, file, cb) {
// 文件存放路径
cb(null, 'public/uploads')
},
filename: function (req, file, cb) {
// console.log(file) // 打印出 file,其中有一个 originalname 就是上传文件的完整名字,从而进行拼接
cb(null, file.fieldname + '-' + Date.now() + '.' + file.originalname.split('.')[1])
}
})
/* file:{
fieldname: 'avatar',
originalname: 'h1.jpg',
encoding: '7bit',
mimetype: 'image/jpeg'
} */
const uplaoder = multer({ storage })
// uploader.single('avatar') 其中 avatar 必须和前端 input 的 name 一致
router.post('/upload', uplaoder.single('avatar'), (req, res) => {
// console.log(req.files, req.body)
UserModel.findOne({ username: req.body.username }).then(data => {
UserModel.updateOne({ username: data.username }, { file: `/uploads/${req.file.filename}` }).then(data => {
res.send('ok')
})
}).catch(err => {
res.send(err)
})
})
- 批量上传
// 表单:
头像:<input type="file" name="avatar" multiple><br>
// 后端:
// uploader.array('avatar',文件上传的数量)
router.post('/upload', uplaoder.array('avatar', 12), (req, res) => {
console.log(req.files, req.body)
let files = req.files.map(file => {
return `/uploads/${file.filename}`
})
UserModel.findOne({ username: req.body.username }).then(data => {
UserModel.updateOne({ username: data.username }, { file: files.toString() }).then(data => {
res.send('ok')
})
}).catch(err => {
res.send(err)
})
})
- 限制文件类型
// 在 multer.diskStorage 内:
destination: function(req, file, cb) {
if (file.mimetype === 'image/jpeg' || file.mimetype === 'image/png' || file.mimetype==='image/gif') {
cb(null, 'public/uploads'))
} else {
cb({ error: '仅支持 jpg/png/gif 格式的图片!' })
}
},
- 限制文件上传大小
const multerConfig = multer({
storage: storage,
limits: { fileSize: 1024 * 1024 * 2 } // 2M
})
标签:username,文件,const,req,multer,file,上传,avatar
From: https://www.cnblogs.com/wj-goodgoodstudy/p/17414259.html