本文共 4662 字，大约阅读时间需要 15 分钟。

form表单上传图片

//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');}//uploadPicexports.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', '默认相册' ]}	})	}//mkPicexports.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);	})}//createPicNameexports.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')			})					}	})}//uploadppicexports.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);     })         });}//errexports.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

						
首页
		上传		创建相册		
相册列表
		
   
			
    			
    						<% for(var i=0;i
    				
     <%= arr[i] %>			<% } %>		
    
   
	

mkpic.ejs

		
创建相册
		
   
    			相册名称： 			
    			
    
			
    		
   
	

picDetails.ejs

				
相册详情
		
   		<% for(var i=0;i
   			
    		<% } %>		<% if(arr.length == 0){ %>			
    当前相册还没有上传图片		<% } %>		
    			
   

tips.ejs

		<%= msg %>，3秒后自动返回首页		
   		
   		

uploadpic.ejs

		
上传相册
		
   
			
    
    
			选择上传的相册名： 			
    				
     				
     								<% for(var i=0;i					<%= arr[i] %>				<% } %>						
    
			
    		
   
	

转载地址：http://wwcti.baihongyu.com/