node.js學習筆記(8)--multer模組檔案上傳
阿新 • • 發佈：2019-01-07
1.簡介
multer是一個node.js檔案上傳中介軟體，它是在 busboy的基礎上開發的!
multer必須指定 enctype="multipart/form-data".
2.安裝
npm install multer -save3.使用
1.建立專案
新建一個express專案 multer (如何建立請看前面章節) 安裝好所有依賴模組 . （注意 我們最好不要用模組名稱作為專案名，因為會使我們該模組安裝失敗）解決方法：修改package.json 裡面的name (隨便改，我改成multer-test)<span style="color:#333333;">E:\nodeTest\multer>npm install multer -save npm WARN install Refusing to install multer as a dependency of itself</span>
2.建立檢視頁面
建立一個form表單，注意別忘記設定enctype。 寫一個if語句，如果存在image則顯示這個image,否則顯示錶單。 注意，不能直接寫if(image){}else{} 因為會報錯：image is not defined。我們需要通過 typeof 來檢測image是否被定義並且存在。
//index.ejs <!DOCTYPE html> <html> <head> <title><%= title %></title> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body> <h1><%= title %></h1> <p>Welcome to <%= title %></p> <% if(typeof(image) !== 'undefined' && image){ %> <img src="<%=image%>"> <%}else{%> <form action="/upload" enctype="multipart/form-data" method="POST"> <input type="file" name="image"> <input type="submit" value="上傳"> </form> <%}%> </body> </html>
3.建立路由
接下來我們在路由裡面寫上傳邏輯: 我們載入multer模組 ，並且設定儲存路徑(如果不設定則檔案會儲存在記憶體中，永遠不會存入磁碟). 我們在專案根目錄新建資料夾uploads(與public同級)，該資料夾就為我們的上傳路徑.//index.js var express = require('express'); var router = express.Router(); var multer = require('multer') //設定儲存路徑 var upload = multer({ dest: 'uploads/' }) /* GET home page. */ router.get('/', function(req, res, next) { res.render('index', { title: 'Express' }); }); router.post('/upload', upload.single("image"), function(req, res, next) { //檔案路徑 var image=req.file.path; res.render('index', { title : 'Express' ,image:image}); }); module.exports = router;
4.託管靜態檔案
我們選擇檔案，點選上傳，會發現圖片找不到。
我們開啟upload 發現圖片已經上傳上去了
查詢下express api,發現靜態檔案訪問是需要通過express.static()方法設定的 （API） 我們修改 app.js檔案 找到該行程式碼（應該是23行）
app.use(express.static(path.join(__dirname, 'public')));path.join(_dirname,'uploads‘) 則為 e:\nodeTest\multer\uploads
app.use('/uploads',express.static(path.join(__dirname, 'uploads')))
http://
5.multer多種上傳
官方例子提供了多種種方法上傳<pre name="code" class="javascript">//單個檔案上傳
upload.single("image") //image為檔案name
//獲得檔案:req.file
//多個相同name檔案上傳
upload.array("image",maxCount) //image為多個相同檔案name ，maxCount則為最大上傳個數 ，也可以不設定
//獲得檔案 req.files
//多個不同name檔案上傳
upload.fields([{name:'image',maxCount:'1'},{name:'txt',maxCount:'2'}])
//name 則為上傳檔案name ,maxCount為該name檔案最大上傳個數 ,可以不設定
//獲得檔案 req.files.image req.files.txt