Express 4.x中间件multer的详细解析

最新推荐文章于 2024-05-24 18:06:27 发布

sunq1982

最新推荐文章于 2024-05-24 18:06:27 发布

阅读量3.6k

点赞数 2

分类专栏： javascript node-js express 文章标签： express 中间件 node-js

本文链接：https://blog.csdn.net/sunq1982/article/details/77528298

版权

javascript 同时被 3 个专栏收录

26 篇文章 0 订阅

订阅专栏

node-js

11 篇文章 0 订阅

订阅专栏

express

8 篇文章 0 订阅

订阅专栏

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等这些功能就不累述了。掌握了基本功能其他的学起来也快的。

sunq1982

关注

2
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
Express 4.x中间件multer的详细解析

multer这个中间件用来处理客户上传的各种文件并且保存到服务端，非常强大和实用。下面让我们来看看怎么搞。首先还是去下载下这个中间件，需要提一下的是，我用的是v1.3.0, 老版本的的使用方法会有较大出入，这里就不说了。 npm install multer –save下面先看客户端的html，上传一个文件玩玩： <html lang="en"><head> <meta char
复制链接

扫一扫