相册例子(Express,formidable组件)

总体结构图

ejs文件夹用于存放 ejs文件
static和upload是静态文件夹，upload用于存放相册以及其相片
index.js 服务启动js
router.js 负责给index做路由(exports.XX=function....)
开始需要安装插件

npm install --save express formidable ejs body-parser

index.js

var express=require("express");
var app=express();
var formidable=require("formidable");
var bodyparser=require("body-parser");
app.use(bodyparser.urlencoded({extended:false}));

var router=require("./router.js");

//配置静态
app.use(express.static("static"));
app.use(express.static("upload"));

//配置模板
app.set("view engine","ejs");
//配置模板路径文件夹
app.set("views",__dirname+"/ejs");

//配置首页指向到index.ejs
app.get("/",router.index);

//上传页面
app.get("/load",router.load);

//上传图片方法
app.post("/loadFile",router.loadFile1);

//查看页面
app.get("/showImg",router.showImg);

//查看图片本体
app.get("/showImgFun",router.showImgFun);

//创建页面
app.get("/mkdir",router.mkdir1);

//创建文件方法本体
app.get("/mkdirDo",router.mkdirDo);

//修改页面
app.get("/rename",router.rename1);

//修改名字本体
app.get("/renameDo",router.renameDo);

//动态读取所有相册名
app.get("/findAlbum",router.findAlbum);



//配置404页面,防止别人乱跑
app.use(router.error);

app.listen(3000);

router.js

var express=require("express");
var app=express();
var fs=require("fs");
var url=require("url");
//上传文件插件
var formidable=require("formidable");
//实例化插件
var form=new formidable.IncomingForm();
form.uploadDir='./upload';
form.keepExtensions=true;

//用一个数组存放文件夹和里面的图片
var arr=[];

//解析post参数
var bodyparser=require("body-parser");
app.use(bodyparser.urlencoded({extended:false}));

//首页
exports.index=function(req,res){
	res.render("index");
}
//404
exports.error=function(req,res,next){
	res.render("404");
}
//上传
exports.load=function(req,res){
	res.render("load");
}
//上传图片方法
exports.loadFile1=function(req,res){
	//参数解释              错误,非文件数据,文件数据,下一步方法
	form.parse(req,function(err,fields,files,next){
		if (err) {
			console.log(err);
		}else{
			console.log(fields);
			let ffss=fields.xiangce;
			var extname = files.pic.name;
            //旧的路径
            var oldpath = __dirname + "/" + files.pic.path;
            //新的路径
            var newpath =__dirname+'/upload/'+fields.xiangce+"/"+extname;
            console.log(newpath);
            fs.readFile(oldpath,function(err,data){
            	if (err) {
            		console.log("读取不到文件");
            	}else{
           			//拷贝到指定文件夹下
           			fs.writeFile(newpath,data,function(err){
           				if (err) {
           					console.log("创建文件失败");
           				}else{
           					console.log("拷贝成功");
           				}
           			});
           			//删除暂放处的原文件
           			fs.unlink(oldpath,function(err){
           				if (err) {
           					console.log("删除原文件失败");
           				}else{
           					console.log("删除成功");
           				}
           			})
           		}
           	})
        }
    });
	res.render("index");
}
//查看相册网页
exports.showImg=function(req,res){
	//若为空路由过去对应的ejs模板("不传参数")
	res.render("showImg");
}
//查看相册本体
exports.showImgFun=function(req,res){
	let parseUrl=url.parse(req.url,true);
	arr.forEach((item,index)=>{
		if (parseUrl.query.xiangce==item.from) {
			console.log(item);
			res.render("showImgText",{pic:item});
		}
	})
}
//创建相册网页
exports.mkdir1=function(req,res){
	res.render("mkdir");
}
//创建相册本体方法
exports.mkdirDo=function(req,res){
	let parseUrl=url.parse(req.url,true);
	//创建的文件夹名
	let name=parseUrl.query.dirname;
	fs.exists(__dirname+"/upload/"+name,function(existx){
		let mess="";
		//假如已存在这个文件夹
		if (existx) {
			console.log("文件夹已存在,请重新重新确认后再新增");
		}else{
			fs.mkdir("./upload/"+name,function(err){
				if (err) {
					console.log("创建失败");
				}else{
					console.log("创建成功")
				}
			})
		}
	})
	res.render("mkdir");
}
//修改相册名网页
exports.rename1=function(req,res){
	res.render("rename");
}
//修改相册本体方法
exports.renameDo=function(req,res){
	let parseUrl=url.parse(req.url,true);
	//旧名
	let old=parseUrl.query.old;
	//新名
	let newname=parseUrl.query.new;
	//第一个参数是旧，第二个是新，第三个是方法回调
	fs.rename(__dirname+"/upload/"+old,__dirname+"/upload/"+newname,function(err){
		if (err) {
			res.send("更改失败");
		}else{
			res.send("更改成功");
		}
	})
}

//获取所有相册(需要用到同步方法)
exports.findAlbum=function(req,res){
	//每次进入这个方法先清空原先数据
	arr=[];
	//同步读取
	let uploadDir=fs.readdirSync("./upload/");
	uploadDir.forEach((items,index)=>{
		//定义一个空的数组用来存放图片
		let picArr=[];
			//items是每个文件夹(相册)
			//再同步读取每个相册内的所有文件图片
			let xcDir=fs.readdirSync("./upload/"+items);
			xcDir.forEach((xcItem,index)=>{
				picArr.push(xcItem);
			})//xcDir.forEach
			arr.push({from:items,picArr:picArr});
	})//uploadDir.forEach
	//异步读取的话是获取不了数据的
	res.send(arr);
}

ejs模板页面

index.ejs

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<h1>首页</h1>
	<a href="/load">上传</a>
	<a href="/showImg">查看相册</a>
	<a href="/mkdir">创建相册</a>
	<a href="/rename">修改相册</a>
</body>
</html>

load.ejs(上传图片页面)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.bootcss.com/jquery/1.2.6/jquery.min.js"></script>
</head>
<body>
	<form action="/loadFile" enctype="multipart/form-data" method="post">
		<input type="file" name="pic">
		<select name="xiangce" id="chooseAlbum"></select>
		<input type="submit" value="上传">
	</form>
	<script type="text/javascript">
		function loadChoose(){
			let op="";
			$.ajax({
				url:"http://localhost:3000/findAlbum",
				type:"get",
				data:{},
				dataType:"json",
				success(dt){
					dt.forEach((item,index)=>{
						op+="<option name=xiangce value="+item.from+" >"+item.from+"</option>"
					})
					$("#chooseAlbum").html(op);
				}
			})
			
		}
		//网页载入时加载
		$(function(){
			loadChoose();
		})
	</script>
</body>
</html>

其他差不多的就省略了。。。整个压缩包放在这里