nodejs 实现图片上传
发布于 12 年前 作者 gelihai 45596 次浏览 最后一次编辑是 8 年前

刚刚学nodejs,做了个图片上传。略简陋,但是没关系复杂的功能都是从简单的开始的嘛 我用的是express的框架使用的view engine是ejs。因为比较简单代码量也不会很多,所以我还是把代码全部贴出来吧。我在社区里面看的很多资料都是没有贴出很多代码,这样像我这样的还是大学生的初学者实在有些蛋疼。先声明,这篇介绍只适合刚刚学习nodejs的童鞋,大神请无视。 这是app.js文件 `var express = require(‘express’) , routes = require(’./routes’) , http = require(‘http’) , flash = require(‘connect-flash’) , path = require(‘path’);

var app = express();

app.configure(function(){ app.set(‘port’, process.env.PORT || 3000); app.set(‘views’, __dirname + ‘/views’); app.set(‘view engine’, ‘ejs’); app.use(express.favicon()); app.use(flash()); app.use(express.logger(‘dev’)); app.use(express.methodOverride()); //这里上传的文件目录存放的是临时文件,如果需要保存需要重新移动到一个新的文件下 app.use(express.bodyParser({uploadDir:’./uploads’})); app.use(express.cookieParser()); //想要在应用中使用session一定要加上这句话,secret的内容应该是随意的 //并且app.configure的配置的加载顺序也是有关系的。。。加载顺序出错了也会出现不可预知的问题 app.use(express.session({secret:‘poynt’})); app.use(app.router); app.use(express.static(path.join(__dirname, ‘public’))); });

app.configure(‘development’, function(){ app.use(express.errorHandler()); });

routes(app); http.createServer(app).listen(app.get(‘port’), function(){ console.log("Express server listening on port " + app.get(‘port’)); });`

在view模板中就写了提交一个表单,此处省去 这是route的index.js文件

// 文件操作的模板 var fs = require(‘fs’);

module.exports = function(app){ app.get(’/’,function(req,res){

	res.render('index',{
		'title': '文件上传'
	});
	
});

app.get('/file-upload', function(req,res) {
	res.render('upload',{
		user: req.session.user,
		src: req.flash('path')
	});
});
app.post('/file-upload', function(req,res) {
	currentUser = {
		username : req.body['username'],
		password : req.body['password']
	};
	//之前我没有写req.session.user,也就是说没有设定session是会报错的。
	//flash要在session环境中才能用
	var tmpPath = req.files.thumbnail.path;
	//移动到指定的目录,一般放到public的images文件下面
	//在移动的时候确定路径已经存在,否则会报错
	var targetPath = 'public/images/' + req.files.thumbnail.name;
	console.log(targetPath);
	//将上传的临时文件移动到指定的目录下
	fs.rename(tmpPath, targetPath , function(err) {
		if(err){
			throw err;
		}
		//删除临时文件
		fs.unlink(tmpPath, function(){
			if(err) {
				throw err;
			}
			//将当前的用户写到会话中
			req.session.user = currentUser;
			req.flash('path', targetPath);
			res.redirect('/file-upload');
		})
	})
	
});

}

下面是展示页面

<!DOCTYPE html> <html> <head> <title>显示图片</title> <link rel=‘stylesheet’ href=’/stylesheets/style.css’ /> </head> <body> <img src=“images/china.jpg” alt=""> </body> </html>

我感觉代码比较简单,跟Java EE的文件上传相比实在是简单多了。 如果有什么更好的实现方法或是哪里有错的地方还请各位指教。

2 回复

你代码那个图片显示呢?如果上传的图片不在public文件夹,你怎么判断读取图片的url?希望你多想想

用了express了为什么又用了http

回到顶部