NodeJS實作圖片上傳實例教程

這篇文章主要介紹了NodeJS實作圖片上傳程式碼(Express) ，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧

檔案上傳是每個網站不可避免的，最近需要做些上傳圖片的功能，主要解決兩個問題，一個是檔案上傳樣式和服務端路徑保存，功能很簡單，做起來倒是沒那麼簡單，先從最簡單的頁面的上傳頁面的樣式開始。

頁面樣式

Html頁面預設的上傳的是比較難看的，需要重做一個背景圖片，透過背景圖片添加上傳的圖片:

上傳圖片樣式:

#

<p class="upload-container">

  <input type="file" name="fileToUpload" id="fileToUpload" class="fileupload" />

</p>

#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 = &#39;public/images/uploadcache/&#39;;<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 = &#39;utf-8&#39;; //设置编辑

  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 = &#39;&#39;; //后缀名

    switch (files.upload.type) {

      case &#39;image/pjpeg&#39;:

        extName = &#39;jpg&#39;;

        break;

      case &#39;image/jpeg&#39;:

        extName = &#39;jpg&#39;;

        break;

      case &#39;image/png&#39;:

        extName = &#39;png&#39;;

        break;

      case &#39;image/x-png&#39;:

        extName = &#39;png&#39;;

        break;

    }

    if (extName.length === 0) {

      res.send({

        code: 202,

        msg: &#39;只支持png和jpg格式图片&#39;

      });

      return;

    } else {

      var avatarName = &#39;/&#39; + Date.now() + &#39;.&#39; + 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還有很多設定的選項，本文根據需求設定了幾項，有額外需求的可以參考官方地址~

以上是NodeJS實作圖片上傳實例教程的詳細內容。更多資訊請關注PHP中文網其他相關文章！