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" 以上是用post方法上傳一個檔案到伺服器localhost:1338埠。
下面是服務端程式碼：
var express = require('express');
var app = express();
var multer = require('multer');//獲得中介軟體
var upload = multer({dest:'uploads/' 這是網頁：
上傳檔案一個檔案點選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的詳細解析
multer這個中介軟體用來處理客戶上傳的各種檔案並且儲存到服務端，非常強大和實用。下面讓我們來看看怎麼搞。 首先還是去下載下這個中介軟體，需要提一下的是，我用的是v1.3.0, 老版本的的使用方法會有較大出入，這裡就不說了。 npm install
Express 4.x中介軟體multer的使用
express4.x中上傳檔案的中介軟體 在上傳介面中新增multer中介軟體 var multer = require('multer') var storage = multer.disk
Express 4.x中介軟體morgan(logger)的詳細解析
開頭先說寫無關的話： 看了很多技術部落格，最痛恨的就是那種拷貝貼上黨，要麼就是那種原文翻譯混亂黨， 都是屬於無腦型。 不僅如此，格式也是讓人心生絕望。浪費了很多時間。 當然有些人寫這些只是給自己記的筆記，自己也不能太過激。 好了，牢騷發過了，現在寫正題。
Express檔案上傳中介軟體Multer
前言： Express預設並不處理HTTP請求體中的資料，對於普通請求體(JSON、二進位制、字串)資料，可以使用body-parser中介軟體。而檔案上傳(multipart/form-data請求)，可以基於請求流處理，也可以使用formidable模組或Multer中介軟體。 Mult
關於express中介軟體的簡要解析之應用級、路由級中介軟體（一）
Express 是一個自身功能極簡，完全是由路由和中介軟體構成一個的 web 開發框架：從本質上來說，一個 Express 應用就是在呼叫各種中介軟體。中介軟體（Middleware） 是一個函式，它可以訪問請求物件（request object (req)
nodejs之express中介軟體multer實現附件上傳
multer是express官方推薦的檔案上傳中介軟體，multer是Nodejs中用於處理檔案上傳 multipart/form-data資料的中介軟體，用於處理任何表單提交資料(包含非multipart/form-data型別的表單); multer 在request物件
ASP.NET Core靜態檔案中介軟體[4]: StaticFileMiddleware 中介軟體全解析
上面的例項演示（搭建檔案伺服器、條件請求以提升效能和區間請求以提供部分內容)從提供的功能和特性的角度對StaticFileMiddleware中介軟體進行了全面的介紹，下面從實現原理的角度對這個中介軟體進行全面解析。public class StaticFileMiddleware { public
中介軟體--ActiveMQ詳細入門使用教程
MQ是訊息中介軟體，是一種在分散式系統中應用程式藉以傳遞訊息的媒介，常用的有ActiveMQ，RabbitMQ，kafka。ActiveMQ是Apache下的開源專案，完全支援JMS1.1和J2EE1.4規範的JMS Provider實現。 特點： 1、支援多種語言編寫客戶端
express 4.X.X版本 npm版本3.X.X版本以上 沒有layout.js檔案的解決方法 頁面佈局設定的方法
這是我所使用的版本 因為看的書是<<node js程式設計指南>> 此書版本過於陳舊,所以上面的步驟無法進行下去,例如書上所寫 "app.set('view.option',layout:false)";可以關掉頁面佈局.但是我發現用view.option
Express核心概念~中介軟體
1)中介軟體的概念 中介軟體就是瀏覽器 2) 毫無疑問，express相對於原生的node的http模組，則是提供了許多的中介軟體，通過將中介軟體掛載在app上，則可以實現很多的功能。 不僅可以使用第三方或者express自帶的中介軟體， 還可以自定義中介軟體。 3)何時需要
ASP.NET Core應用針對靜態檔案請求的處理[4]: DirectoryBrowserMiddleware中介軟體如何呈現目錄結構
和StaticFileMiddleware中介軟體一樣，DirectoryBrowserMiddleware中間本質上還是定義了一個請求地址與某個物理目錄之間的對映關係，而目標目錄體現為一個FileProvider物件。當這個中介軟體接收到匹配的請求後，會根據請求地址解析出對應目錄的相對路徑，並利用這個Fil
Quartz任務排程(4)JobListener分版本超詳細解析
在《spring學習筆記(15)趣談spring 事件：實現業務邏輯解耦，非同步呼叫提升使用者體驗》我們通過例項分析講解了spring的事件機制，或許你會覺得其中的配置略顯繁瑣，而在Quartz框架中，它為我們集成了強大的事件機制，輕鬆地幫助我們在任務排程中完成各類輔佐操
Java Spring Boot 2.0實戰RabbitMQ中介軟體與API解析
《阿里巴巴Java Spring Boot 2.0開發實戰課程》10課 本期分享專家：徐雷—阿里巴巴雲棲Java講師，MongoDB講師 本期分享主題：Java Spring Boot開發實戰訊息中介軟體 RabbitMQ 與api原始碼解析(面試題) RabbitMQ是流行的開源訊息佇列系統
Express 4.x Node.js的Web框架
本文轉自LaplaceDemon/SJQ的部落格園【http://www.cnblogs.com/shijiaqi1066/p/3821150.html】 本文使用node.js v0.10.28 + express 4.2.0 1 Express概述 Express
Express 4.x上傳檔案
express版本4.x1.頁面表單<form method="POST" enctype="multipart/form-data"> <input type="file" name="file"/> <inpu
express 4.x, Socket.IO 1.x 共享session
var express = require("express"); var Server = require("http").Server; var session = require("express-session"); var RedisStore = r
express裡的中介軟體
前言 vue-cli腳手架+webpack結合的時候，後臺用的是express框架搭建的簡單伺服器，包括熱載入等等，都用到了express中的中介軟體概念。 程式碼大概如下： // handle fallback for HTML5 history A
Nodejs Express 4.X 中文API 4--- Router篇
本篇是Express 4.0 API翻譯的第四篇，本篇的內容主要是Router的相關操作。 Router() 路由器是一個孤立的中介軟體和路由的例項。路由器可以被認為是一個”mini”的應用程
ASP.NET Core 3.x 中介軟體流程與路由體系
中介軟體分類 ASP.NET Core 中介軟體的配置方法可以分為以上三種，對應的Helper方法分別是：Run(), Use(), Map()。 Run()，使用Run呼叫中介軟體的時候，會直接返回一個響應，所以後續的中介軟體將不會被執行了。 Use()，它會對請求做一些工作或處理，例如
[lambda x: x*i for i in range(4)] 詳細解析+LEGB規則 閉包原理
轉自：http://www.cnblogs.com/shiqi17/p/9608195.html 一、問題描述 fun = [lambda x: x*i for i in range(4)] for item in fun: print(item(1)) 上述式子的