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還有不少設置的選項，本文根據需求設置了幾項，有額外需求的能夠參考官方地址~