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安装地址:

1	`npm install formidable@latest`

上传图片

var cacheFolder = 'public/images/uploadcache/';<br>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
            });
        }
    });
};