node.js，后台数据创建相册form表单上传图片

form表单上传图片

app.js

//express  ejs   formidable  
var express = require('express');
var app = express();
var router = require('./router');
var path = require('path');
var bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: false }));//设置post请求的编码方式
//设置ejs为模板引擎
app.set('view engine','ejs');
//可以把上传的图片的目录 设置为静态资源
app.use(express.static(path.join(__dirname,'upload')));

//一般情况下  我们并不会在入口文件中写业务代码
//渲染首页
app.get('/',router.index);
//上传相册页
app.get('/uploadPic',router.uploadPic);
//创建相册页
app.get('/mkPic',router.mkPic);
//相册详情页  可以通过路由传参的方式  来去知道当前页面应该显示哪些内容
app.use('/picDetails',router.picDetails);
//app.get('/picDetails/:id',router.picDetails);



//相册名称的接口
app.get('/getPicName',router.getPicName);

//创建相册名称的接口
app.post('/createPicName',router.createPicName);

//上传图片的接口
app.post('/uploadppic',router.uploadppic);


app.use('*',router.err)//匹配404页面



app.listen(3001,function () {
	console.log('服务器已启动。。。')
})

router.js

var fs = require('fs');
var queryString = require('querystring');
var formidable = require('formidable');
var timeStamp = require('time-stamp');
var path = require('path');
var tips = require('./tipsConfig')

//首页的渲染
exports.index = function (req,res) {
	//查找到相应的数据obj
	fs.readdir('./upload',function (err,arr) {
		if(err){
			throw err;
		}
		console.log(arr)
		//ejs模板的数据  对象的格式  {key:val}
		res.render('index',{arr:arr});
		//{arr:[ '美女', '美女0', '美女1', '美女123', '默认相册' ]}
	})
	//res.render('index');
}
//uploadPic
exports.uploadPic = function (req,res) {
	fs.readdir('./upload',function (err,arr) {
		if(err){
			throw err;
		}
		console.log(arr)
		//ejs模板的数据  对象的格式  {key:val}
		res.render('uploadPic',{arr:arr});
		//res.render('index',{arr:arr});
		//{arr:[ '美女', '美女0', '美女1', '美女123', '默认相册' ]}
	})
	
}
//mkPic
exports.mkPic = function (req,res) {
	res.render('mkPic');
}
//picDetails  use中间件
//  /picDetails/默认相册
exports.picDetails = function (req,res) {
	//req.path  拿到后面所传递的参数    默认相册      /默认相册
	//req.path
	var obj;
	var path = queryString.unescape(req.path);
	console.log(path);//   /美女
	fs.readdir('./upload'+path,function (err,arr) {
		if(err){
			throw err;
		}
		console.log(arr);//[ '02 - 副本.jpg', '02.jpg' ]
		obj = {
			path:path,
			arr:arr
		}
		res.render('picDetails',obj);
	})
	//ejs模板中 需要  相册的具体目录  还有该目录下所有图片
	//数据  对象  {}
	
}


//getPicName  接口
exports.getPicName = function (req,res) {
	fs.readdir('./upload',function (err,arr) {
		if(err){
			throw err;
		}
		console.log(arr);
		//后台.send  发送给前端  是一个json数据的时候 
		//那么这个get路由请求  就是给前端的一个接口来的
		res.send(arr);
	})
}
//createPicName
exports.createPicName = function (req,res) {
	console.log(req.body)//{ picName: '美女' }
	//判断当前想要创建的目录 是否已经存在
	fs.exists('./upload/'+req.body.picName,function (isMake) {
		if(isMake){
			console.log('当前相册名称已经存在，不允许重复创建')
			//res.render('msg')
			res.send('不成功')
		}else{
			console.log('当前相册名称不存在，允许创建')
			fs.mkdir('./upload/'+req.body.picName,function (err) {
				if(err){
					throw err;
				}
				console.log('目录已经成功创建')
				res.send('成功')
				//res.render('msg')
			})
			
		}
	})
}

//uploadppic
exports.uploadppic = function (req,res) {
	var form = new formidable.IncomingForm();
 	form.uploadDir = "./uploadBAck";//定义上传图片的路径
 	form.keepExtensions = true;//是否保留扩展名
 	//fields  非文件数据
 	//files  文件数据来的
    form.parse(req, function(err, fields, files) {
      console.log(fields.picName);//{ picName: '美女' }
      console.log(files);
      console.log(files.upPic.path);//一开始存放图片的地址
      //uploadBAck\upload_e6acd623e4bc0432304ca4682af605d6.jpg
      //fs.rename()
      //时间戳+随机数+扩展名
      var time = timeStamp('YYYYMMDD');
      var ran = parseInt(Math.random()*4578475 + 329473847);
      var ext = path.extname(files.upPic.path);
      
     // console.log(time+ran+ext);新的名字
     var oldName = path.join(__dirname,files.upPic.path);
     var newName = path.join(__dirname,'upload',fields.picName,time+ran+ext);
     fs.rename(oldName,newName,function (err) {
     	if(err){
     		throw err;
     	}
     	console.log('成功上传图片');
     	//res.send('您已经成功上传了图片')
     	res.render('tips',tips.tips.upSuc);
     })
     
    });
}


//err
exports.err = function (req,res) {
	res.status(404).render('tips',tips.tips.err);
}

tipsconfig.js

exports.tips = {
	err:{
		msg:'404，当前页面不存在',
		path:'/',
		text:'首页'
	},
	upSuc:{
		msg:'上传成功',
		path:'/',
		text:'首页'
	}
}

index.ejs

	<style type="text/css">
			.btn{
				display: inline-block;
				width: 100px;
				height: 30px;
				border: 1px #dddddd solid;
				border-radius: 5px;
				text-decoration: none;
				text-align: center;
				line-height: 30px;
				color: #00c7ff;
				margin-right: 20px;
			}
			.picOne{
				display: inline-block;
				width: 100px;
				height: 100px;
				border: 1px #808080 solid;
				border-radius: 5px;
				text-decoration: none;
				text-align: center;
				line-height: 100px;
				color: black;
				margin-right: 20px;
			}
		</style>
		<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<h1>首页</h1>
		<a class="btn" href="/uploadPic">上传</a>
		<a class="btn" href="/mkPic">创建相册</a>
		<h1>相册列表</h1>
		<div class="picList">
			<!--
				{arr:[ '美女', '美女0', '美女1', '美女123', '默认相册' ]}
			-->
			<!--<a class="picOne" href="/picDetails/默认相册">默认相册</a>
			<a class="picOne" href="/picDetails/美女">美女</a>-->
			
			<% for(var i=0;i<arr.length;i++){ %>
				<a class="picOne" href="/picDetails/<%= arr[i] %>"><%= arr[i] %></a>
			<% } %>
		</div>
	</body>

mkpic.ejs

<body>
		<h1>创建相册</h1>
		<form action="/createPicName" method="post">
			相册名称： 
			<input type="text" name="picName" />
			<br />
			<input type="submit" value="创建"/>
		</form>
	</body>

picDetails.ejs

<style type="text/css">
			img{
				width: 150px;
				height: auto;
			}
		</style>
	</head>
	<body>
		<h1>相册详情</h1>
		<!--
			{
				path:'/美女',
				arr:[ '02 - 副本.jpg', '02.jpg' ]
			}
		-->
		<% for(var i=0;i<arr.length;i++){ %>
			<img src="<%= path %>/<%= arr[i] %>"/>
		<% } %>
		<% if(arr.length == 0){ %>
			<span>当前相册还没有上传图片</span>
		<% } %>
		<!--<img src="/默认相册/01.jpg"/>-->
		
	</body>

tips.ejs

<body>
		<%= msg %>，<span>3</span>秒后自动返回<a href="/">首页</a>
		<!--404，当前页面不存在，-->
		<!--创建目录成功， 1秒后返回  首页-->
	</body>
	<script type="text/javascript">
		var span = document.getElementsByTagName('span')[0];
		var clock;
		clock = setInterval(function () {
			//var num = span.innerHTML;
			span.innerHTML -= 1;
			if(span.innerHTML == 0){
				clearInterval(clock);
				location.href = '/';//把当前网址设置成自己写的这个
			}
			
		},1000)
	</script>

uploadpic.ejs

	<body>
		<h1>上传相册</h1>
		<form action="/uploadppic" method="post" enctype="multipart/form-data">
			<input type="file" required="required" name="upPic" /><br />
			选择上传的相册名： 
			<select name="picName">
				<!--{arr:[ '美女', '美女0', '美女1', '美女123', '默认相册' ]}-->
				<!--<option value="默认相册">默认相册</option>
				<option value="美女">美女</option>-->
				
				<% for(var i=0;i<arr.length;i++){ %>
					<option value="<%= arr[i] %>"><%= arr[i] %></option>
				<% } %>
			</select>
			<br />
			<input type="submit" value="上传"/>
		</form>
	</body>