Nodejs入門基礎（上傳及檢視圖片demo）
阿新 • • 發佈：2018-12-11
shouye.ejs--首頁頁面，用於跳轉上傳頁面和檢視圖片的頁面
upload.ejs--上傳頁面，用於使用者上傳圖片使用
allPhoto.ejs--檢視頁面，用於使用者檢視圖片資訊
baocuo.ejs--報錯頁面，當用戶輸入錯誤的地址會訪問到該頁面
shouye.js--主路由
router2.js--提供給主路由相應的方法，處理邏輯判斷
shouye.ejs參考程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>首頁</title> </head> <body> <a href="/upload">上傳</a><!--用於首頁跳轉到upload.ejs，上傳圖片的介面--> <a href="/allPhoto">檢視圖片</a><!--用於首頁跳轉allPhoto.js，檢視圖片的介面--> </body> </html>
upload.ejs參考程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>上傳頁面</title> </head> <body> <!--/postImg是提交到shouye.js路由進行處理,除了圖片還附帶了名字和年齡兩個屬性--> <form action="/postImg" method="post" enctype="multipart/form-data"> <label>請選擇圖片</label><br> <input type="file" id="picture" name="picture"><br> 名字：<input type="text" id="name" name="name"><br> 年齡：<input type="text" id="age" name="age"> <button type="submit">提交</button> </form> </body> </html>
allPhoto.ejs
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <!--allPhoto頁面--> <!--allPhotoAll是shouye.js呼叫router2.js後獲得的集合資料，用於頁面遍歷顯示圖片--> <%for(var i=0;i<allPhotoAll.length;i++){%> <img src="<%=allPhotoAll[i]%>" style="width: 200px;height: 200px"/> <%}%> </body> </html>
baocuo.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<img src="./404.jpg"/><!--用於使用者訪問錯誤地址，直接提示404圖片的頁面，註冊了靜態，訪問的時候直接./即可使用-->
</body>
</html>shouye.js
var express = require("express");//匯入express
var app = express();//例項化express
var router2 = require("./router2.js");//引入router2.js，用於處理邏輯
app.set("view engine", "ejs");//配置ejs
app.set("views");//配置訪問ejs的資料夾
app.all('*', function (req, res, next) {//跨域問題
res.setHeader("Access-Control-Allow-Origin", "*");
next();
});
//載入靜態資訊，開啟服務後可以直接拼該地址的檔案資訊
app.use(express.static("./upload"));
app.use(express.static("./public"));
app.get("/", router2.shouyePage);//呼叫router2.js裡面的shouyePage方法，用於設定預設頁面
app.get("/upload",router2.upload);//用於首頁跳轉到upload.ejs，上傳圖片的介面
app.post("/postImg",router2.postImg);//當上傳圖片頁面提交的時候呼叫該方法
app.get("/allPhoto",router2.allPhoto);//用於首頁跳轉allPhoto.js，檢視圖片的介面
app.listen(3000);//設定伺服器
app.use(function (req, res) {//過濾器，如果不是進入首頁則進入400報錯的頁面
res.render("baocuo");
console.log("進入過濾器報錯");
});
router2.js
var fs = require("fs");//檔案讀取
var formidable = require("formidable");//第三方外掛，用於上傳圖片，要在Node伺服器下載
exports.shouyePage = function (req, res) {//該方法用於進入預設首頁，shouye.js呼叫
res.render("shouye");
};
exports.upload = function (req, res) {//該方法用於進入上傳頁面，shouye.js呼叫
res.render("upload");
};
exports.postImg = function (req, res) {
var form = new formidable.IncomingForm();//例項化上傳檔案的外掛
form.uploadDir=__dirname+"/upload";//設定檔案上傳後儲存的路徑
form.parse(req,function (err,fields,files,next) {
//以下可以列印上傳的資訊測試
/* console.log(fields);*/
/* console.log(files);*/
/* console.log(form);*/
//修改上傳檔名的名字
fs.rename(files.picture.path,form.uploadDir+'/'+files.picture.name,(err)=>{
if (err){
return;
}
});
if (err){
return;
}
var size=parseInt(files.picture.size);//獲取上傳的圖片的大小，用作判斷必須先轉換成Int
if (size>100000){//判斷圖片是否過大
res.send("圖片過大");
fs.unlink(files.picture.path);//刪除圖片
return;
}
});
res.render("shouye");//判斷完畢後跳轉回首頁
};
exports.allPhoto=function(req,res){//迴圈遍歷圖片方法
fs.readdir("upload",function (err,files) {
if (err){
return;
}
var allPhotoAll=[];//宣告一個數組
files.forEach(function (photo,index) {
fs.stat("./upload/"+photo,function (err,stats) {//查到./upload文件下的資訊
if (stats.isFile()){//如是檔案
allPhotoAll.push(photo);//將檔案新增到陣列中
}
if (index==files.length-1){//圖片數量==陣列-1（陣列是0開始算）
res.render("allPhoto",{allPhotoAll});//把集合傳遞過去給頁面
}
})
})
})
};