圖片上傳之FileAPI與NodeJs

時間 2019-11-09

標籤圖片上傳 fileapi nodejs 简体版

原文原文鏈接

HTML5之fileAPI

HTML5之fileAPI使得咱們處理圖片上傳更加簡單。html

實例

html代碼前端

<div class="form-group">
     <label for="modal_inputFile" class="col-md-3 control-label label-font">位置圖:</label>
     <div class="col-md-9">
         <input type="text" readonly="" class="form-control" placeholder="點擊選擇文件">
         <input type="file" id="modal_inputFile">
         <img src="" class="img-responsive" id="modal-pre" alt="預覽區" style="max-height: 300px">
     </div>
</div>

效果:
html5

這裏咱們能夠經過$("#modal_inputFile")[0].files[0]來獲取到圖片的信息。
node

這裏有name,size,type這幾個咱們經常使用的屬性。git

實現預覽

選擇好圖片後，咱們都但願會有個預覽功能。這個html5也爲咱們想到了。github

他提供了FileReader這個新的對象給咱們。ajax

FileReader該接口主要用來把文件讀入內存，而且讀取文件中的數據。json

這樣咱們就能夠經過date url來實現預覽了。後端

var file = document.getElementById(modal_inputFile'').files[0];
    if (!file) {
    return false;
    }
    var reader = new FileReader();

    reader.readAsDataURL(file);
    reader.onload = function(e) {
    var ib_pre = document.getElementById('modal-pre');
    ib_pre.src = this.result;
}

這樣就實現了預覽。
瀏覽器

咱們再來查看下img的src。

<img src="data:image/png;base64,iVBORXXXXXXXXXXXXX....XXXXXXX" class="img-responsive" id="modal-pre" alt="預覽區" style="max-height: 300px">

src是base64編碼。

具體可見:HTML5權威指南--標籤新變化,文件API,拖放API(簡要學習筆記一)

與後臺對接

既然前端使用文件API能知足咱們的需求，那咱們接下來就須要上傳到服務端了。當仁不讓的就是NodeJs了。

前端請求

下面是前端發起請求的例子：

//圖片上傳
$('#preUpload').on('click', function(e) {
    var data = new FormData();
    var _files = $("#modal_inputFile")[0].files[0];
    var ect = ($("#modal_inputFile")[0].files[0]).name.split('.')[1];
    if(ect !== 'png'){
        alert('請上傳png圖片!')
        return;
    }
    data.append("modal_file", _files);
    $.ajax({
        type: 'post',
        dataType: 'json',
        url: window.stnt_hosts + 'thirdAdmanage/upload/modal',
        data: data,
        contentType: false,
        processData: false
    }).done(function(data, status) {
        console.log('上傳成功');
        
    }).fail(function(err) {
        console.log('上傳失敗');
    })
})

這裏經過FormData來處理咱們須要上傳的數據。

這裏的data數據是一個序列過的對象。後臺接受就好了。

後端處理

服務端咱們使用node-formidable來處理圖片的保存等操做。

見代碼:

var formidable = require("formidable");
var form = new formidable.IncomingForm();

//臨時目錄
form.uploadDir = './upload/';


//預覽圖片上傳
router.post('/upload/modal', function(req, res, next) {
    form.parse(req, function(err, fields, files) {
        if (files.modal_file) {
            rename(files.modal_file.path, files.modal_file.name, 'preview')
            res.send({
                stats:'success',
                data:[]
            })
        }
    })
});

function rename(old, _new, code, bId) {
    var path = './upload/' + code + '/';
        fs.exists(path, function(exists) {
            if (!exists) {
                fs.mkdir(path)
                console.log('建立文件夾！')
            }
            fs.renameSync(old, path + _new, function(err) {
                if (err) {
                    console.log(err);
                    
                    return;
                }
                console.log('上傳成功!')
            })
        })
}

這裏使用fs.renameSync的緣由是，咱們裏面設置的臨時目錄form.uploadDir是存在於內存中的數據，並非真正的圖片。

相似這樣

咱們須要經過fs的方法，將文件從新保存到咱們須要的地方便可。這時候就是圖片了。