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>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
