NodeJS-图片上传(Express)

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

页面样式

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

上传图片样式:

                            <div class="upload-container">
                                <input type="file" name="fileToUpload" id="fileToUpload" class="fileupload" />
                            </div>

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还有很多设置的选项，本文根据需求设置了几项，有额外需求的可以参考官方地址~