1. 程式人生 > >Node.js 博客實例(三)添加文件上傳功能

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

文件 ace direct 上傳文件 file form parser rec mark

原教程 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

技術分享

提交:

技術分享

發表博客,在博客裏引用照片:

技術分享

發表:

技術分享

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