node.js--图片上传及显示

【介绍】

做一个demo,页面上传图片和图片名称,然后显示出上传的图片及其名称(使用jade模板)

【问题】

1.jade模板如何安装?

2.jade模板怎么使用,语法规则?

3.代码逻辑?

 

 

1.jade模板如何安装?

jade模板的安装很简单,只需要在指定路径下执行命令 npm install jade

安装之后是这样的(下图),文件路径下node_modules也出现jade

2.jade模板语法

jade是一个模板引擎,使用一定的语法规则写出html页面,并可以把变量传入其中。写html页面的时候有一些规则:

(1)标签与子标签的关系。是通过空格来控制的,在其右侧的全是它的子标签,当往下遇到一个与其同列的标签时,表示标签闭合。

(2)标签的书写。在jade里面,html表示的是<html></html>

(3)id和class。在jade中,普通的html语句<div id="contain" class="main other-class"></div>被改写成

div#contain.main.other-class

(4)属性。在jade中,属性值是写在括号里面的,像<link rel="stylesheet" href="static/style.css">被改写成

link(rel="stylesheet", href="statc/style.css")

 

3.代码逻辑

(1)编辑页面index.jade和show.jade,index.jade是form表单页面,show.jade是展现图片页面

index.jade

html
    head
        meta(charset="utf-8")
        title choose a picture
    body
        form(ENCTYPE="multipart/form-data", action="upload", method="POST")
            input(type="file" name="theImage")
            input(type="submit" value="上传图片")

 

show.jade

html
    head
        meta(charset="utf-8")
        title show image
    body
        div
            p.title 图片展示
            img.image(src="#{imageURL}")

(2)逻辑处理server.js

  1.require使用到的模块。

  2.编写服务器,res对象添加render函数,用来解析jade,输出页面。

    3.路由实现。‘/‘展现index页面,‘/upload‘处理上传文件并展现show页面。

  4.编写展现index页面和upload函数的逻辑

var http = require(‘http‘),
    url = require(‘url‘),
    fs = require(‘fs‘),
    querystring = require(‘querystring‘),
    static_module = require(‘./node_modules/static_module/static_module‘),
    jade = require(‘jade‘),
    formidable = require(‘formidable‘);



http.createServer(function(req, res){

    res.render = function(jadeTemplate, options){
        var str = fs.readFileSync(jadeTemplate, ‘utf8‘);
        var fn = jade.compile(str, {filename: jadeTemplate, pretty : true});
        var page = fn(options);
        res.writeHead(200, {‘Content/type‘ : ‘text/html‘}); //输出页面
        res.end(page);
    };

    var pathname = decodeURI(url.parse(req.url).pathname);
    if(pathname == ‘favicon.ico‘){
        return;
    }
    switch(pathname){
        case ‘/‘:
            showIndex(req, res);
            break;
        case ‘/upload‘:
            upload(req, res);
            break;
        default:
            static_module.getStaticFile(pathname, res, req);
    }

    function showIndex(req, res){
        res.render(‘index.jade‘, {});
    };

    function upload(req, res){
        var form = new formidable.IncomingForm();
        form.parse(req, function(error, fields, files){
            var fileName = Date.parse(new Date()) + ‘-‘ + files.theImage.name;
            fs.renameSync(files.theImage.path, __dirname + ‘/uploadFile/‘ + fileName);
            res.render(‘show.jade‘, {‘imageURL‘ : ‘/uploadFile/‘ + fileName});
        });
    };

}).listen(1337);

 

 static_module模块逻辑:

/**
 *
 * 定义全局常用变量
 */
var BASE_DIR = __dirname,
    CONF     = BASE_DIR + ‘/conf/‘,
    STATIC   = __dirname + ‘/../..‘,
    CACHE_TIME = 60*60*24*365,
    mmieConf;
/**
 *
 * require本模块需要的Node.js模块
 */
var sys = require(‘util‘),
    http = require(‘http‘), 
    fs    = require(‘fs‘),
    url   = require(‘url‘),
    path  = require(‘path‘);
    mmieConf = getMmieConf();

/**
 *
 * 响应静态资源请求
 * @param string pathname
 * @param object res
 * @return null
 */
exports.getStaticFile = function(pathname, res, req){
    var extname = path.extname(pathname);
    extname  = extname  ? extname.slice(1) : ‘‘;
    var realPath = STATIC + pathname;console.info(realPath);
    var mmieType = mmieConf[extname] ? mmieConf[extname] : ‘text/plain‘;
    fs.exists(realPath, function (exists) {
        if (!exists) {
            res.writeHead(404, {‘Content-Type‘: ‘text/plain‘});
            res.write("This request URL " + pathname + " was not found on this server.");
            res.end();
        } else {
            var fileInfo = fs.statSync(realPath);
            var lastModified = fileInfo.mtime.toUTCString();
            /* 设置缓存 */
            if ( mmieConf[extname]) {
                var date = new Date();
                date.setTime(date.getTime() + CACHE_TIME * 1000);
                res.setHeader("Expires", date.toUTCString());
                res.setHeader("Cache-Control", "max-age=" + CACHE_TIME);
            }
            if (req.headers[‘if-modified-since‘] && lastModified == req.headers[‘if-modified-since‘]) {
                    res.writeHead(304, "Not Modified");
                    res.end();
            } else {
                
                    fs.readFile(realPath, "binary", function(err, file) {
                        if (err) {
                            res.writeHead(500, {‘Content-Type‘: ‘text/plain‘});
                            res.end(err);
                        } else {
                        res.setHeader("Last-Modified", lastModified);
                        res.writeHead(200, {‘Content-Type‘: mmieType});
                        res.write(file, "binary");
                        res.end();
                    }
             });
          }
        }
      });
}
//获取MMIE配置信息,读取配置文件
function getMmieConf(){
    var routerMsg = {};
    try{
        var str = fs.readFileSync(CONF + ‘mmie_type.json‘,‘utf8‘);
        routerMsg = JSON.parse(str);
    }catch(e){
        sys.debug("JSON parse fails")
    }
    return routerMsg;
}

 

 

另外:

(1)使用了静态文件管理模块 ./static_module.js,根据路径来读取到静态文件。

(2)图片的获得使用了formidable模块。

var formidable = require(‘formidable‘);
var form = new formidable.IncomingForm(); //不知道这是干啥的,就是new了一个formidable.IncomingForm()对象
form.parse(req, function(error, fields, files){//异步回调
    console.info(files.image, files.image.path,files.image.name);
    //依次是图片文件,图片文件路径,图片文件名称
});

(3)上传文件,form表单应该设置属性ENCTYPE="multipart/form-data"

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。