multer
Multer 是一个 node.js 中间件,用于处理
multipart/form-data
类型的表单数据,它主要用于上传文件。它是写在 busboy 之上非常高效。
使用
Multer 会添加一个
body
对象 以及file
或files
对象 到 express 的request
对象中。body
对象包含表单的文本域信息,file
或files
对象包含对象表单上传的文件信息。
下载安装
npm install multer
配置
//config
const multer = require('multer');
const storage = multer.diskStorage({
destination: (req, file, cb) => {
cb(null, "./public/upload");
},
filename: (req, file, cb) => { //req:请求对象 file:文件对象 cb:回调函数
let fileFormat = (file.originalname).split('.');
cb(null, fileFormat[0]+'-'+Date.now()+'.'+fileFormat[fileFormat.length - 1]);
}
});
const upload = multer({
storage: storage
});
module.exports = upload;
同步提交
HTML:
<!--multipart/form-data必须使用post这个数据格式,就是为了不会对上传的文件进行处理-->
<form action="/" method="post" enctype="multipart/form-data">
<!--这里必须要有name属性,在后面的singer方法中要使用-->
<input type="file" name="img1">
<input type="submit" value="提交">
</form>
对应路由的处理:
app.post('/tUpload', upload.single('img1'), (req, res) => {
res.render('index', {url: ''});
})
异步提交
异步提交使用ajax来提交
这里主要使用了Formdata()全局对象,来提交到后台。
单文件
//前台
let formDataObj;
$('.inputFile').change(function () {
//得到file对象
let file = this.files[0];
// 创建一个FormData的实例对象
formDataObj = new FormData();
//将file文件添加FormData对象中
//imgFile 就是路由中的singer('imgFile')对应
formDataObj.append('imgFile', file);
})
$('.btn').click(function () {
$.ajax({
url: '/yUpload',
method: 'post',
data: formDataObj,
processData: false, //不对其中的数据不需要进行额外的处理
contentType: false //不对其中的类型进行设置
}).then((res) => {
console.log(res)
})
})
//后台
app.post('/yUpload', upload.single('imgFile'), (req, res) => {
res.json({
errCode: '0',
path: './upload/' + req.file.filename
})
})
多文件上传
//客户端
let formDataObj1;
$('.many').change(function () {
let file = this.files;
for(let i = 0; i < file.length; i++) {
let httpUrl = window.webkitURL.createObjectURL(file[i]);
$('.yulan')[0].innerHTML += `<img src="${httpUrl}" class="yuImg">`;
}
formDataObj1 = new FormData();
for(let i = 0; i < file.length; i++) {
formDataObj1.append('imgFiles', file[i]);
}
})
//点击上传图片
$('.btn1').click(function () {
$.ajax({
url: '/manyImg',
method: 'post',
data: formDataObj1,
processData: false,
contentType: false
}).then((res) => {
console.log(res)
})
})
//路由
router.post('/manyImg', upload.array('imgFiles'), (req, res) => {
console.log(req.files)
})
这样也能可以正确的拿到。