Express 4.x中間件multer的詳細解析

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的詳細解析

fitflex: CSS佈局就是這麼簡單

Webpack4兩種加載第三方模塊的方法:ProvidePlugin和 DllPlugin

setInterval()和clearInterval()在閉包內的用法

戲說js的call, apply 和 bind （文章內容可能引起邏輯嚴謹的程序員的不適，慎入！）

關於js中對對象原型和構造函數的一些理解

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結