node使用express搭建簡單web框架並實現檔案上傳
阿新 • • 發佈：2019-02-07
1.建立目錄web
2.編寫package.json(模組管理檔案，描述模組資訊)
{ "name": "web", "version": "1.0.0", "description": "first web app", "main": "app.js", "author": "", "license": "ISC", "dependencies": { "body-parser": "^1.17.2", "cookie-parser": "^1.4.3", "express": "^4.15.3", "moment": "^2.18.1", "morgan": "^1.8.2", "multer": "^1.3.0", "serve-favicon": "^2.4.3" } }
3.初始化依賴
npm init4.建立目錄結構
--web
--public
--css
--js
--img
--routes(存放路由檔案)
--views(存放檢視檔案)
app.js(模組入口檔案)
package.json(模組描述檔案)6.編寫路由檔案index.jsvar path = require("path"); var favicon = require("serve-favicon"); var logger = require("morgan"); var cookieParser = require("cookie-parser"); var bodyParser = require('body-parser'); var express = require("express"); var app = express(); //set app variable app.set('port',process.env.PORT || 7000); app.set("views",path.join(__dirname,"views")); app.set("view engine","jade"); //use middleware function app.use(favicon(__dirname+"/public/favicon.ico")); app.use(logger("dev")); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({extended: false})); app.use(cookieParser()); app.use(express.static(__dirname + "/public")); app.use("/", require("./routes/index.js")); app.use("/user",require("./routes/user.js")); app.use("/system",require("./routes/system.js")); //catch 404 and forward to error handler app.use(function(req, res, next) { var err = new Error('Not Found'); err.status = 404; next(err); }); // error handlers // development error handler // will print stacktrace if (app.get('env') === 'development') { app.use(function(err, req, res, next) { res.status(err.status || 500); res.render('error', { message: err.message, error: err }); }); } // production error handler // no stacktraces leaked to user app.use(function(err, req, res, next) { res.status(err.status || 500); res.render('error', { message: err.message, error: {} }); }); app.listen(app.get('port')); console.log("listen on port:" + app.get('port')); module.exports = app;
var path = require("path"); var express = require("express"); var router = express.Router(); router.get("/",function(req,res){ //res.sendFile(path.join(__dirname,"upload.html")); res.send("OK"); }); router.get("/user",function(req,res){ res.send("index user page" + req.url); }); router.get("/admin",function(req,res){ res.send("admin page" + req.url); }); router.get("/redirect",function(req,res){ res.redirect("https://www.baidu.com"); }); router.get("/upload",function(req,res){ // res.send(path.join(__dirname,"../upload.html")); console.log(path.join(__dirname+"/../upload.html")); // res.sendFile(path.join(__dirname,"../upload.html")); res.sendFile(path.join(__dirname+"/../upload.html")); }); module.exports = router;
7.編寫路由檔案user.js
var express = require("express");
var router = express.Router();
router.get("/add",function(req,res){
res.send("add user page" + req.url);
});
router.get("/delete",function(req,res){
res.send("delete user page" + req.url);
});
router.get("/listuser",function(req,res){
res.send("listuser page" + req.url);
});
module.exports = router;8.編寫路由檔案system.js(用於寫一些介面，如檔案上傳)
var path = require("path");
var moment = require("moment");
var express = require("express");
var multer = require('multer');
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, path.join(__dirname,"/../uploads"));
},
filename: function (req, file, cb) {
var date = new Date();
cb(null, "("+moment().format("YYYY-MM-DD")+")"+file.originalname);
}
});
var upload = multer({ storage: storage })
var router = express.Router();
router.post('/upload', upload.single('avatar'), function (req, res, next) {
res.send('檔案上傳成功')
console.log(req.file);
console.log(req.body);
});
module.exports = router;9.在views資料夾下新增error.jade
不加可能會報錯，因為你加了模板引擎，會預設要求你新增一個顯示錯誤的頁面，內容為空就好了，不需要編寫
10.在web根目錄下新增一個靜態頁面，用於上傳檔案的頁面
upload.html(在index.js這個路由檔案中訪問/upload時就是返回的這張頁面)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>upload</title>
</head>
<body>
<form id='editfile' method='post' action='/system/upload' enctype='multipart/form-data'>
<input name="text" type="text"/>
選擇圖片：<input name="avatar" id='upfile' type='file'/>
<input type='submit' value='提交'/>
</form>
</body>
</html>11.啟動伺服器
node app.js12.在瀏覽器中輸入127.0.0.1:7000/upload進入上傳頁面,上傳一個檔案
13.特別注意事項！！！！
upload.html表單裡的檔案控制元件的name屬性avatar必須和system.js裡面upload.single("avatar")一致，具體取什麼值無所謂，但必須一致！！才能獲取對應name的檔案