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});//把集合传递过去给页面
}
})
})
})
};