Node.js 博客实例(三)增加文件上传功能

原教程
https://github.com/nswbmw/N-blog/wiki/_pages的第三章

上传文件目前有三种方法:

使用 Express 自带的文件上传功能,不涉及数据库

使用 Formidable 外部模块,不涉及数据库

上传到 MongoDB ,涉及数据库

这里使用第一种,用户将文件上,存储于:blog/public/images/目录下。

blog/views/header.ejs  在<span><a title="发表" href="/post">post</a</span>前添加一行:

<span><a title="上传" href="/upload">upload</a</span>

index.js添加代码:

fs=require('fs'),

以及:

<span style="white-space:pre">	</span>app.get('/upload',checkLogin);
	app.get('/upload',function(req,res){
		res.render('upload',{
			title:'文件上传',
			user:req.session.user,
			success:req.flash('success').toString(),
			error:req.flash('error').toString()
		});
	});

	app.post('/upload',checkLogin);
	app.post('/upload',function(req,res){
		for(var i in req.files){
			if(req.files[i].size==0){
				//使用同步方式删除一个文件
				fs.unlinkSync(req.files[i].path);
				console.log("successfully removed an empty file");
			}else{
				var target_path='./blog/public/images/'+req.files[i].name;
				//使用同步方式重命名一个文件
				fs.renameSync(req.files[i].path,target_path);
				console.log('successfully rename a file');
			}
		}
		req.flash('success','文件上传成功');
		res.redirect('/upload');
	});
	

blog/views/下新建upload.ejs:

<%- include header %>
<form method='post' action='/upload' enctype='multipart/form-data' >
  <input type="file" name="file1" multiple="multiple" /><br>
  <input type="file" name="file2" multiple="multiple" /><br>
  <input type="file" name="file3" multiple="multiple" /><br>
  <input type="file" name="file4" multiple="multiple" /><br>
  <input type="file" name="file5" multiple="multiple" /><br>
  <input type="submit" />
</form>
<%- include footer %>

blog/app.js中app.use(express.bodyParser());改为:

//保留上传文件的后缀名,并把上传目录设置为 /public/images
app.use(express.bodyParser({ keepExtensions: true, uploadDir: './blog/public/images' }));

此时我们上传一张图片:123.png

提交:

发表博客,在博客里引用照片:

发表:

时间: 12-10

Node.js 博客实例(三)增加文件上传功能的相关文章

Node.js 博客实例(十一)文章检索功能

原教程 https://github.com/nswbmw/N-blog/wiki/_pages的第十一章,由于版本等的原因,在原教程基础上稍加改动即可实现. 现在我们来给博客增加文章检索功能,即根据关键字模糊查询文章标题,且字母不区分大小写. 首先,我们修改 header.ejs ,在 </nav> 前添加一行代码: <span><form action="/search" method="GET"><input type

Node.js 博客实例(三)添加文件上传功能

原教程 https://github.com/nswbmw/N-blog/wiki/_pages的第三章 上传文件眼下有三种方法: 使用 Express 自带的文件上传功能,不涉及数据库 使用 Formidable 外部模块,不涉及数据库 上传到 MongoDB ,涉及数据库 这里使用第一种,用户将文件上,存储于:blog/public/images/文件夹下. blog/views/header.ejs  在<span><a title="发表" href=&quo

一个简单的blog系统(三) 增加文件上传功能

1. 一个完整的博客怎么能缺少图片呢,目前上传文件的方法有三种: (1)使用Express自带的文件上传功能,不涉及数据库. (2)使用Formidable外部模块,不涉及数据库. (3)上传到MongoDB,涉及到数据库. 可以看出,第一种方式最简单,Express通过bodyParser()解析请求体,因此我们可以使用bodyParser()来实现文件的上传功能. 2.实现过程 2.1 首先打开header.ejs,在<li><a href="/post" tit

Node.js 博客实例(九)标签和标签页面

原教程https://github.com/nswbmw/N-blog/wiki/_pages的第九章,由于版本等的原因,在原教程基础上稍加改动即可实现. 每篇文章最多有三个标签(少于三个也可以),当点击主页左侧标签页链接时,跳转到标签页并列出所有已存在标签:当点击任意一个标签链接时,跳转到该标签页并列出所有含有该标签的文章. 首先我们来实现给文章添加标签的功能. 打开 post.ejs ,在 <input type="text" name="title" /

Node.js 博客实例(七)分页功能

原教程 https://github.com/nswbmw/N-blog/wiki/_pages的第七章,由于版本等的原因,在原教程基础上稍加改动即可实现. 给博客的主页和用户页面增加分页功能.设定:主页和用户页面每页最多显示十篇文章. 这里要用到 mongodb 的 skip 和 limit 操作. 打开 post.js ,把 Post.getAll 函数修改如下: //读取文章及其相关信息 Post.getTen = function(name,page,callback) { //打开数据

Node.js 博客实例(六)留言功能

原教程https://github.com/nswbmw/N-blog/wiki/_pages的第五章,由于版本等的原因,在原教程基础上稍加改动即可实现. 实现用户给文章留言的功能,留言保存在数据库中. post.js ,修改 Post.prototype.save 中要存入的文档为: //要存入数据库的文档 var post = { name: this.name, time: time, title: this.title, post: this.post, comments:[] }; 我

Node.js 博客实例(四)实现用户页面和文章页面

原教程 https://github.com/nswbmw/N-blog/wiki/_pages的第四章,由于版本等的原因,在原教程基础上稍加改动即可实现. 现在,我们来给博客添加用户页面和文章页面. 所谓用户页面就是当点击某个用户名链接时,跳转到:域名/u/用户名 ,并列出该用户的所有文章. 同理,文章页面就是当点击某篇文章标题时,跳转到:域名/u/用户名/时间/文章名 ,进入到该文章的页面. post.js: 将 Post.get 修改为 Post.getAll ,同时将 index.js

Node.js 博客实例(一)简单博客

原教程 https://github.com/nswbmw/N-blog/wiki/_pages的第一章.因为版本号等的原因,在原教程基础上稍加修改就可以实现. 环境: win7旗舰版64位 Node.js:0.10.31 mongodb:2.6.4 express:3.× 效果: 注冊界面: 登录界面: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZG9uZ3NoYW9zaHVhaQ==/font/5a6L5L2T/fontsize/400/fil

Node.js 博客实例(五)编辑与删除功能

原教程 https://github.com/nswbmw/N-blog/wiki/_pages的第五章,由于版本等的原因,在原教程基础上稍加改动即可实现. 现在给博客添加编辑文章与删除文章的功能. 当一个用户在线时,只允许他在自己发表的文章页进行编辑或删除,编辑时,只能编辑文章内容,不能编辑文章标题. 在style.css ,添加如下样式: .edit{margin:3px;padding:2px 5px;border-radius:3px;background-color:#f3f3f3;c