NodeJS-图片上传(Express)_html/css_WEB-ITnose

文件上传是每个网站不可避免的，最近需要做些上传图片的功能，主要解决两个问题，一个是文件上传样式和服务端路径保存，功能很简单，做起来倒是没那么简单，先从最简单的页面的上传页面的样式开始。

页面样式

Html页面默认的上传的是比较难看的，需要重做一个背景图片，通过背景图片添加上传的图片:

上传图片样式:

CSS样式:

.upload-container {            background-image: url(../../images/rv/add.jpg);            background-repeat: no-repeat;            width: 180px;            height: 200px;            padding-bottom: 10px;            display: inline-block;            vertical-align: middle;            .fileupload {                opacity: 0;                filter: alpha(opacity=0);                width: 200px;                height: 200px;            }        }

Html点击上传有两种比较常用的方式iFrame上传和Ajax上传，本文采用了Ajax上传是 HTML5提出了XMLHttpRequest对象的第二版，传递文件数据主要是通过FormData实现:

$('.fileupload').change(function(event) {        /* Act on the event */        if ($('.fileupload').val().length) {            var fileName = $('.fileupload').val();            var extension = fileName.substring(fileName.lastIndexOf('.'), fileName.length).toLowerCase();            if (extension == ".jpg" || extension == ".png") {                    var data = new FormData();                    data.append('upload', $('#fileToUpload')[0].files[0]);                    $.ajax({                        url: 'apply/upload',                        type: 'POST',                        data: data,                        cache: false,                        contentType: false, //不可缺参数                        processData: false, //不可缺参数                        success: function(data) {                            console.log(data);                        },                        error: function() {                            console.log('error');                        }                    });            }         }    });

服务端保存

NodeJS服务端保存需要使用了第三方插件

node-formidable ，npm安装地址:

npm install formidable@latest

上传图片

var cacheFolder = 'public/images/uploadcache/';exports.upload = function(req, res) {    var currentUser = req.session.user;    var userDirPath =cacheFolder+ currentUser.id;    if (!fs.existsSync(userDirPath)) {        fs.mkdirSync(userDirPath);    }    var form = new formidable.IncomingForm(); //创建上传表单    form.encoding = 'utf-8'; //设置编辑    form.uploadDir = userDirPath; //设置上传目录    form.keepExtensions = true; //保留后缀    form.maxFieldsSize = 2 * 1024 * 1024; //文件大小    form.type = true;    var displayUrl;    form.parse(req, function(err, fields, files) {        if (err) {            res.send(err);            return;        }        var extName = ''; //后缀名        switch (files.upload.type) {            case 'image/pjpeg':                extName = 'jpg';                break;            case 'image/jpeg':                extName = 'jpg';                break;            case 'image/png':                extName = 'png';                break;            case 'image/x-png':                extName = 'png';                break;        }        if (extName.length === 0) {            res.send({                code: 202,                msg: '只支持png和jpg格式图片'            });            return;        } else {            var avatarName = '/' + Date.now() + '.' + extName;            var newPath = form.uploadDir + avatarName;            displayUrl = UPLOAD_FOLDER + currentUser.id + avatarName;            fs.renameSync(files.upload.path, newPath); //重命名            res.send({                code: 200,                msg: displayUrl            });        }    });};

不同用户上传置放在不同的位置，根据需求来设置，当然也有可以每张图片都给不同的id编号，推荐第三方uuid插件: https://github.com/broofa/node-uuid

文件重命名:

fs.renameSync(files.upload.path, newPath); //重命名

文件上传进度:

form.on('progress', function(bytesReceived, bytesExpected) {});

node-formidable 有很多官方API还有很多设置的选项，本文根据需求设置了几项，有额外需求的可以参考官方地址~