nodejs 实现图片上传
发布于 2年前 作者 gelihai 4782 次浏览

刚刚学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> </body> </html>

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

1 回复

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

回到顶部