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

梦里梦外; 2021-12-14 07:11 174阅读 0赞

## form表单上传图片 ##

![在这里插入图片描述][20190706112732529.jpg]  
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

tipsconfig.js

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

index.ejs

mkpic.ejs

picDetails.ejs

tips.ejs

<body>
    		<%= msg %>，<span>3</span>秒后自动返回<a href="/">首页</a>
    		
    		
    	</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">
    				
    				
    				
    				<% for(var i=0;i<arr.length;i++){ %>
    					<option value="<%= arr[i] %>"><%= arr[i] %></option>
    				<% } %>
    			</select>
    			<br />
    			<input type="submit" value="上传"/>
    		</form>
    	</body>

[20190706112732529.jpg]: /images/20211214/175b365a755a48bc93e12f4e0cdbb510.png