安裝multer模組

單圖上傳

npm install multer

引用模組

它是依賴於express的一個模組

//引用express並配置
var express = require("express");
var app = express();
app.listen(3000);

var multer = require('multer');
/*var upload = multer({
	//如果用這種方法上傳，要手動新增文明名字尾
        //如果用下面配置的程式碼，則可以省略這一句
 

	dest: 'uploads/'
})*/

配置

設定儲存檔案的地方，並根據上傳的檔名對應檔案新增字尾 可以通過filename屬性定製檔案儲存的格式

var storage =
 
 multer.diskStorage({
	//設定上傳後文件路徑，uploads資料夾會自動建立。
	destination: function(req, file, cb) {
		cb(null, './uploads')
	},
	//給上傳檔案重新命名，獲取新增字尾名
	filename: function(req, file, cb) {
		var fileFormat = (file.originalname).split(".");
		//給圖片加上時間戳格式防止重名名
		//比如把 abc.jpg圖片切割為陣列[abc,jpg],然後用陣列長度-1來獲取字尾名
		cb(null, file
 
.fieldname + '-' + Date.now() + "." + fileFormat[fileFormat.length - 1]);
	}
});
var upload = multer({
	storage: storage
});

接受檔案

upload.single('xxx')，xxx與表單中的name屬性的值對應 這裡雖然用到post請求，但實際上不需要bodyParser模組處理

app.post('/upload-single', upload.single('logo'), function(req, res, next) {
	console.log(req.file)
	console.log('檔案型別：%s', req.file.mimetype);
	console.log('原始檔名：%s', req.file.originalname);
	console.log((req.file.originalname).split("."))
	console.log('檔案大小：%s', req.file.size);
	console.log('檔案儲存路徑：%s', req.file.path);
	res.send({
		ret_code: '0'
	});
});

多圖上傳

多圖上傳只要更改一下地方，前端往file輸入框加多一個multiple="multiple"屬性值，此時就可以在選圖的時候多選了，當然也可以並列多個file輸入框(不推薦多個上傳圖片輸入框)，這樣體驗會不好

<input type="file" name="logo" multiple="multiple" />

後端也需要相應的改變

app.post('/upload-single', upload.single('logo'), function(req, res, next) {
//upload.single('logo')變為upload.array('logo', 2)，數字代表可以接受多少張圖片
app.post('/upload-single', upload.array('logo', 2), function(req, res, next) {

如果不想有圖片數量上傳限制，我們可以用upload.any()方法

app.post('/upload-single', upload.any(), function(req, res, next) {	
	res.append("Access-Control-Allow-Origin","*");
	res.send({
		wscats_code: '0'
	});
});

前端部分

formData表單提交

<form action="http://localhost:3000/upload-single" method="post" enctype="multipart/form-data">
	<h2>單圖上傳</h2>
	<input type="file" name="logo">
	<input type="submit" value="提交">
</form>

formData表單+ajax提交

<form id="uploadForm">
	<p>指定檔名： <input type="text" name="filename" value="" /></p>
	<p>上傳檔案： <input type="file" name="logo" /></ p>
	<input type="button" value="上傳" onclick="doUpload()" />
</form>

FormData物件，是可以使用一系列的鍵值對來模擬一個完整的表單，然後使用XMLHttpRequest傳送這個"表單"

注意點

• processData設定為false。因為data值是FormData物件，不需要對資料做處理。
• <form>標籤新增enctype="multipart/form-data"屬性。
• cache設定為false，上傳檔案不需要快取。
• contentType設定為false。因為是由<form>表單構造的FormData物件，且已經聲明瞭屬性enctype="multipart/form-data"，所以這裡設定為false

上傳後，伺服器端程式碼需要使用從查詢引數名為logo獲取檔案輸入流物件，因為<input>中宣告的是name="logo"

function doUpload() {
	$.ajax({
		url: 'http://localhost:3000/upload-single',
		type: 'POST',
		cache: false, //不必須
		data: new FormData($('#uploadForm')[0]),
		processData: false,//必須
		contentType: false,//必須
		success: function(data) {
			console.log(data)
		}
	})
}

參考文件

Github MyDemo Github Multer MDN FormData物件的使用