Express 4.x中间件multer的详细解析
来源:互联网 发布:回收站数据恢复免费版 编辑:程序博客网 时间:2024/05/21 19:43
multer这个中间件用来处理客户上传的各种文件并且保存到服务端,非常强大和实用。下面让我们来看看怎么搞。
首先还是去下载下这个中间件,需要提一下的是,我用的是v1.3.0, 老版本的的使用方法会有较大出入,这里就不说了。
npm install multer –save
下面先看客户端的html,上传一个文件玩玩:
<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title></head><body> <h2>文件上传</h2> <form action="http://127.0.0.1:1338/indexFormFile.html" method="post" enctype="multipart/form-data"> <input type="file" name="myfile" /><br/> <input type="submit" value="submit"/><br/> </form> </body></html>
以上是用post方法上传一个文件到服务器localhost:1338端口。
下面是服务端代码:
var express = require('express');var app = express();var multer = require('multer');//获得中间件var upload = multer({dest:'uploads/'});//指定配置项,这里指定文件保存于当前目录下的upload子目录app.use(upload.single('myfile'));//运用中间件,并且指明文件名,此名需要同html input name的文件名一致,否则会报错app.get('/indexFormFile.html', function (req, res) { res.sendFile(__dirname + '/indexFormFile.html');});//把html文件显示在客户端指定路由路径下app.post('/indexFormFile.html', function (req, res) { res.send(req.file);//服务端响应把客户端获得的文件信息显示在客户端});app.listen(1338);//监听localhost:1338端口
这是网页:
上传文件一个文件点击submit
可以看到客户端显示出此文件的信息:
我们打印出来看清楚点:
{ fieldname: 'myfile', originalname: 'AformData1.txt', encoding: '7bit', mimetype: 'text/plain', destination: 'uploads/', filename: '1ff80fb8cdf541fd599d4b1a2ad4a07f', path: 'uploads\\1ff80fb8cdf541fd599d4b1a2ad4a07f', size: 74 }
具体啥意思不用介绍了吧。
如果你去upload文件夹下你会看到这个文件。
不过有一点值得注意的是产生的文件名是一串唯一的uuid码,而且没有扩展名。
接下来是多文件上传,我们来改下客户端html。
<form action="http://127.0.0.1:1338/indexFormFile.html" method="post" enctype="multipart/form-data"> <input type="file" name="myfile" /><br/> <input type="file" name="myfile" /><br/> <input type="file" name="myfile" /><br/> <input type="submit" value="submit"/><br/> </form>
再改下服务端:
app.use(upload.array('myfile', 3));//single改成了array,表示接收一个文件数组,后面的数字3表示能接收的最大文件数目
同时下面这个也要改:
res.send(req.files);//req.file改成req.files表示接收多个文件
运行后是这样:
可以看到已经有三个文件的信息在上面了,而且是数组形式输出。
好了,我们知道了单个和多个文件的传输方法。但是还是有些问题需要解决:
- 我们希望把文件存在硬盘的任意地方,希望设置绝对路径。
- 我们希望给一个有意义的文件名,而不是一串编码。
那接下来我们就要用下面的方法:
var express = require('express');var app = express();var multer = require('multer');var storage = multer.diskStorage({ destination: function (req, file, cb) { cb(null, './uploads'); },//指定硬盘空间的路径,这里可以是任意一个绝对路径,这里为了方便所以写了个相对路径 filename: function (req, file, cb) { cb(null, file.fieldname + '-' + Date.now() + '.txt');//指定文件名和扩展名 }});//设置用硬盘的存储方法var upload = multer({ storage: storage });//表示用硬盘的存储方法app.use(upload.array('myfile', 3));app.get('/indexFormFile.html', function (req, res) { res.sendFile(__dirname + '/indexFormFile.html');});app.post('/indexFormFile.html', function (req, res) { res.send(req.files); console.log(req.files);});app.listen(1338);
再次运行客户端,看看uploads文件目录下的文件吧:
可以看到文件名已经不是一串码了,后面的数字是时间的毫秒数,而且显示为txt文件。
multer还有catch err的功能。
对服务端的代码稍作修改。
var express = require('express');var app = express();var multer = require('multer');var storage = multer.diskStorage({ destination: function (req, file, cb) { cb(null, './uploads'); }, filename: function (req, file, cb) { cb(null, file.fieldname + '-' + Date.now() + '.txt'); }});var upload = multer({ storage: storage }).array('myfile', 2);//我们把最大上传文件数目maxCount从3改成2,故意让它报错。//值得注意的是,如果我们要捕获错误,就不能用app.use()的方法来获得中间件,所以我们要把下面的代码注释掉,并且直接在upload上运行.array(),如上。//app.use(upload.array('myfile', 3));app.get('/indexFormFile.html', function (req, res) { res.sendFile(__dirname + '/indexFormFile.html');});app.post('/indexFormFile.html', function (req, res) { upload(req, res, function (err) { if (err) { res.send(err); return; } else res.send(req.files); });//直接在app.post()中调用中间件upload,并且把错误信息发送到客户端});app.listen(1338);
运行后客户端的结果如下:
报错信息显示为 limit unexpected file, 限制了超出的文件数量。
有些小伙伴说用form提交缺乏灵活性,我就是喜欢用Ajax,也行,下面我们用Ajax实现多文件上传。
下面是客户端html和ajax脚本:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Upload files</title> <script> function uploadFile() { var formData = new FormData(); var files = document.getElementById('file').files; for (let i = 0; i < files.length; i++) { formData.append('myfile', files[i]); } var xhr = new XMLHttpRequest(); xhr.open('POST', 'index3.html', true); xhr.onload = function (e) { if (this.status == 200) { document.getElementById('result').innerHTML = this.response; } }; xhr.send(formData); } </script></head><body> <h1>use bodyParser middleware and upload files</h1> <form action="" id="form1" enctype="multipart/form-data"> pls choose files <input type="file" name="file" multiple="multiple" id="file" /></br> <input type="button" id='btn' value="upload file" onclick="uploadFile()" /> </form> <output id="result"></output></body></html>
在多文件上传的时候我们注意需要给input属性注明 multiple = “multiple”
服务端脚本不变,运行后,得到如下结果:
还有还有小伙伴提要求,说我的文件不能都按照一个名字保存啊,那就是需要分配field,这一点也是没有问题的。
我们改下客户端中ajax的代码,用了两个文件名,myfile和otherfile:
<script> function uploadFile() { var formData = new FormData(); var files = document.getElementById('file').files; for (let i = 0; i < files.length; i++) { if (i < 2) { formData.append('myfile', files[i]); } else { formData.append('otherfile', files[i]) } } var xhr = new XMLHttpRequest(); xhr.open('POST', 'index3.html', true); xhr.onload = function (e) { if (this.status == 200) { document.getElementById('result').innerHTML = this.response; } }; xhr.send(formData); } </script>
相应的在服务端中修改中间件的配置:
var upload = multer({ storage: storage }).fields([ { name: 'myfile', maxCount: 2 }, { name: 'otherfile', maxCount: 2 } ]);
再次运行后查看本地uploads目录下的文件:
可以看到otherfile已经妥妥的存进去了。
再秀一下客户端:
至此multer中间件的基本功能就讲解完了。
除此之外还有filter, memoryStorage等这些功能就不累述了。掌握了基本功能其他的学起来也快的。
- Express 4.x中间件multer的详细解析
- Express 4.x中间件express-session的详细解析
- Express 4.x中间件morgan(logger)的详细解析
- Express 4.x中间件methodOverride的详细解析
- Express 4.x中间件morgan(logger)的详细解析
- express 4.X 使用multer中间件 上传文件
- Express 4.x 使用CORS跨域的详细解析
- nodejs中的中间件--Multer
- multer中间件上传文件
- express里的中间件
- Nodejs进阶 基于express+multer的文件上传
- 关于express中间件的简要解析之应用级、路由级中间件(一)
- exoress文件上传中间件Multer
- Express文件上传之Multer
- 深入理解express的中间件
- express的中间件basicAuth详解
- express的中间件use,Router
- Express 常用中间件 body-parser 实现解析
- 【转】POJ 3378 Crazy Thairs(数据集中+DP+树状数组+高精度)
- 自制疲劳检查摄像头
- java调用命令提示符并返回结果(中文无乱码)
- 移动端点击与点击穿透
- c++ stl multimap基本操作使用技巧详细介绍
- Express 4.x中间件multer的详细解析
- 第一题“最大”点集
- Qt学习——qt软件启动界面
- android实现双击事件详解
- leetcode 34. Search for a Range (binary search std::lower_bound)
- Java网络编程—(1)网络的简介
- (lintcode)第3题统计数字
- 如何借助于syslogd生成自己的日志,并且将自己应用的日志放进系统日志目录
- [eclipse]改项目名称后tomcat连接问题解决方法