使用multer
中间件
0. 安装:
npm install multer --save
1. 单文件上传
<!--客户端-->
<form action="/xxx" method="POST" enctype="multipart/form-data">
<input type="text" name="username">
<input type="file" name="myfile">
<button type="submit">提交</button>
</form>
// 服务端
const express = require('express');
const app = express();
app.use(express.static('views'));
// 引入中间件模块
const multer = require('multer')
// 指定上传目录
const upload = multer({ dest: 'uploads/' });
// 单文件上传
app.post('/xxx', upload.single('myfile'), function (req, res, next) {
// req.body 对象中是表单中提交的文本字段(如果有)
console.log(req.body);
// 被上传的文件信息
console.log(req.file);
})
app.listen(80, '127.0.0.1', function () {
console.log('启动成功');
});
2. 多文件上传1
<!--客户端-->
<form action="/xxx" method="POST" enctype="multipart/form-data">
<input type="text" name="username">
<!-- multiple 表示允许多文件上传 -->
<input type="file" name="myfile" multiple>
<button type="submit">提交</button>
</form>
// 服务端
const express = require('express');
const app = express();
app.use(express.static('views'));
// 引入中间件模块
const multer = require('multer')
// 指定上传目录
const upload = multer({ dest: 'uploads/' });
// 多文件上传 upload.array
// 第一个参数表示file的name
// 第二个参数表示一次最大支持上传的数量, 客户端上传的超出数量的话会报错,本参数可以不设置,表示不限制数量
app.post('/xxx', upload.array('myfile', 2), function (req, res, next) {
// req.body 对象中是表单中提交的文本字段(如果有)
console.log(req.body);
// 被上传的文件信息 注意这里是.files
console.log(req.files);
})
app.listen(80, '127.0.0.1', function () {
console.log('启动成功');
});
3. 多文件上传2
<form action="/xxx" method="POST" enctype="multipart/form-data">
<input type="text" name="username">
<!-- multiple允许多文件上传 -->
<input type="file" name="myfile1" multiple>
<input type="file" name="myfile2" multiple>
<button type="submit">提交</button>
</form>
const express = require('express');
const app = express();
app.use(express.static('views'));
// 引入中间件模块
const multer = require('multer')
// 指定上传目录
const upload = multer({ dest: 'uploads/' });
// 多文件上传 upload.fields传入的是数组,
app.post('/xxx', upload.fields([
{name: 'myfile1', maxCount: 2},
{name: 'myfile2', maxCount: 2}
]), function (req, res, next) {
// req.body 对象中是表单中提交的文本字段(如果有)
console.log(req.body);
// 被上传的文件信息 注意这里是.files
console.log(req.files);
})
app.listen(80, '127.0.0.1', function () {
console.log('启动成功');
});
4. 上传后的数据信息说明
fieldname - 表单提交的文件名(input控制的name属性)
originalname - 文件在用户设备中的原始名称
encoding - 文件的编码类型
mimetype - 文件的Mime类型
size - 文件的大小
destination - 文件的保存目录(DiskStorage)
filename - 文件在destination中的名称(DiskStorage)
path - 上传文件的全路径(DiskStorage)
buffer - 文件对象的Buffer(MemoryStorage)
5. 后缀名问题
我们前面上传的文件,会发现上传的文件是没有后缀名的,其实拿到上传文件的信息,再配合着之前写的fs.rename()方法是可以改一下后缀名,让它们正确的。
不过multer本身也给我们提供了一些方法,比如使用 磁盘存储引擎diskStorage
:
const express = require('express');
const app = express();
app.use(express.static('views'));
// 使用mime模块获取后缀名
const mime = require('mime');
// 引入中间件模块
const multer = require('multer')
// 自定义存储引擎
let storage = multer.diskStorage({
// 自定义存储路径
destination: function (req, file, cb) {
cb(null, __dirname + '/uploads')
},
// 自定义文件名
//cb是express中提前写好的一个函数,我们调用即可
filename: function (req, file, cb) {
// 最后随机生成文件名
cb(null, file.fieldname + '.' + mime.getExtension(file.mimetype));
}
})
// 指定存储引擎
const upload = multer({ storage: storage });
// 多文件上传
app.post('/xxx', upload.fields([
{ name: 'myfile1', maxCount: 2 },
{ name: 'myfile2', maxCount: 2 }
]), function (req, res, next) {
// req.body 对象中是表单中提交的文本字段(如果有)
console.log(req.body);
// 被上传的文件信息 注意这里是.files
console.log(req.files);
res.send();
})
这里建议使用fs.rename()
配合着使用哪种方法。
6. 上传限制和错误拦截
const express = require('express');
const app = express();
app.use(express.static('views'));
// 使用mime模块获取后缀名
const mime = require('mime');
// 引入中间件模块
const multer = require('multer')
// 指定上传目录
const upload = multer({
dest: 'uploads/',
// 限制文件上传的大小和数量
limits:{
//限制文件大小10kb
fileSize: 10*1000,
//限制文件数量
files: 5
},
// 限制上传文件的类型
fileFilter: function(req, file, cb){
// 限制文件上传类型,仅可上传png格式图片
if(file.mimetype == 'image/png'){
cb(null, true)
} else {
cb(null, false)
}
}
});
// 多文件上传
// 设置上传字段的接收部分
let up = upload.fields(
[ {name: 'myfile1', maxCount: 2}],
[ {name: 'myfile2', maxCount: 2}],
);
app.post('/xxx', function (req, res) {
up(req, res, function (err) {
console.log(req.body);
console.log(req.files);
console.log(err);
})
})
app.listen(80, '127.0.0.1', function () {
console.log('启动成功');
});