利用node.js實現的多圖上傳功能

關於多圖上傳功能可能應該大多數朋友都有使用，如果有上傳多張圖片的要求，那麼多圖上傳功能自然非常的便利，下面就通過程式碼介紹一下如何利用node.js實現此功能，下面只給出了核心的程式碼片段，需要的可以進行一下參考。

一.路由入口檔案:

本程式碼中使用的是routes.js，當然也通常習慣於使用app.js

程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
//新增美食
app.all('/add', users.add);

二.路由控制檔案:

在本程式碼中是/routes/users.js

程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
//新增美食
exports.add = function (req, res) {
  if (req.method == "GET") {
    var user = {};
    if(req.session.user){
      user = req.session.user;
    }
    res.render("users/food_add", {title:'釋出美食-'+config.name,name:config.name,user:user});
  } 
  else  if (req.method == "POST") {
    //獲取資料
  var x = req.body.x;
    var y = req.body.y;
    var cat_id = req.body.cat_id;
    var cat_name = req.body.cat_name;
    var address = req.body.address;
    var title = req.body.title;
    var desc = req.body.desc;
    var content = req.body.content;
    var pics = '';
    var price = req.body.price;
    var tags = req.body.tags;
    var add_time = Date.parse(new Date())/1000;
    var support = 0;
    var uid = req.body.uid;
     //處理圖片上傳
   //console.dir(req.files);
    var file_obj = req.files.pics;
    //console.log(file_obj.length);
    var file_obj2 = [];
    for(var i=0;i<file_obj.length;i++){
      if(file_obj.name){
        file_obj2.push(file_obj);
      }
    }
    var length = file_obj2.length;
    if(length>0){
      file_obj2.forEach(function(item,index){
        if(item.path){
          var tmpPath = item.path;
          var type = item.type;
          var extension_name = "";
          //移動到指定的目錄，一般放到public的images檔案下面
      //在移動的時候確定路徑已經存在，否則會報錯
      var tmp_name = (Date.parse(new Date())/1000);
          tmp_name = tmp_name+''+(Math.round(Math.random()*9999));
          //判斷檔案型別
      switch (type) {
            case 'image/pjpeg':extension_name = 'jpg';
              break;
            case 'image/jpeg':extension_name = 'jpg';
              break;
            case 'image/gif':extension_name = 'gif';
              break;
            case 'image/png':extension_name = 'png';
              break;
            case 'image/x-png':extension_name = 'png';
              break;
            case 'image/bmp':extension_name = 'bmp';
              break;
          }
          var tmp_name = tmp_name+'.'+extension_name;
          var targetPath = 'public/images/' + tmp_name;
          console.log(tmpPath);
          //將上傳的臨時檔案移動到指定的目錄下
      fs.rename(tmpPath, targetPath , function(err) {
            if(err){
              throw err;
            }
            if(pics){
              pics += ','+tmp_name;
            }
            else{
              pics += tmp_name;
            }
            //判斷是否完成
       //console.log(index);
            //刪除臨時檔案
       fs.unlink(tmpPath, function(){
              if(err) {
                throw err;
              }
              else{
                if((index+1)==length){
                  console.log(targetPath);
                  //上傳處理完成
           //資料
           var data = {
                    x:x,//經度
             y:y,//維度
             cat_id:cat_id,//分類id
                     cat_name:cat_name,//分類名稱
             address:address,//地址
             title:title,//標題
             desc:desc,//簡介
             content:content,//內容
             pics:pics,//圖片欄位，以','隔開多張圖片
             price:price,//價格
             tags:tags,//標籤 以','隔開多個
             add_time:add_time,//支援度
             support:support,//支援度 預設為0
                     uid:uid//使用者id 可匿名
           };
                  food_preDao.insert(data, function (err, food) {
                    if(err){
                      res.json({err:100,content:'資料庫錯誤'});
                    }
                    else{
                      res.json({err:0,content:'釋出成功！',data:food});
                    }
                  });
                }
              }
            });
          });
        }
      });
    }
    else{
      //沒有圖片
    //資料
    var data = {
         x:x,//經度
      y:y,//維度
      cat_id:cat_id,//分類id
          cat_name:cat_name,//分類名稱
      address:address,//地址
      title:title,//標題
      desc:desc,//簡介
      content:content,//內容
      pics:pics,//圖片欄位，以','隔開多張圖片
      price:price,//價格
      tags:tags,//標籤 以','隔開多個
      add_time:add_time,//支援度
      support:support,//支援度 預設為0
          uid:uid//使用者id 可匿名
    };
       food_preDao.insert(data, function (err, food) {
         if(err){
           res.json({err:100,content:'資料庫錯誤'});
         }
         else{
           res.json({err:0,content:'釋出成功！',data:food});
         }
       });
    }
  }
};

三檢視檔案:

本程式碼中是/views/users/food_add.ejs

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<style>
.upload_item {
  width:50px;
  height:45px;
  overflow:hidden;
  border:2px dashed #bfbfbf;
  float:left;
  margin-right: 10px;
}
.upload_item_add {
  width:50px;
  height:45px;
  display:block;
  line-height:42px;
  text-align:center;
  font-size:30px;
  cursor:pointer;
}
.upload_input{}
</style>
<script>
var ADD = {
  upload_click:function(obj){
    $(obj).parent().children().eq(1).click();
  },
  upload_change:function(obj){
    var path;
    //C:\Documents and Settings\hud\桌面\AddFile.jpg
    path=$(obj).val();      
    var aa;
    aa=path.split('.');
    //alert(aa[aa.length-1]);  //jpg 結果
    var name;
    name=path.split('\\'); 
    var bb=name[name.length-1];             
    //alert(bb.substr(0,bb.indexOf('.')));  //AddFile 結果
    $(obj).parent().children().eq(0).css('fontSize','12px');
    $(obj).parent().css('borderStyle','solid');
    $(obj).parent().children().eq(0).html(bb.substr(0,bb.indexOf('.')));
    if($(obj).parent().attr('index')==1){//新增
      var html = '<div class="upload_item" index="1"><span class="upload_item_add">+</span><input type="file" name="pics" id="pics" class="upload_input" /></div>';
      $('#upload_box').append(html);
      $(obj).parent().attr('index','0');
    }
  }
};
</script>
<form method="post" action="/add" enctype="multipart/form-data">
  <table>
    <tr>
      <td>經度：</td>
      <td><input type="text" name="x" id="x" /></td>
    </tr>
    <tr>
      <td>維度：</td>
      <td><input type="text" name="y" id="y" /></td>
    </tr>
    <tr>
      <td>分類：</td>
      <td><select name="cat_id">
          <option value="1">分類1</option>
        </select></td>
    </tr>
    <tr>
      <td>地址：</td>
      <td><input type="text" name="address" id="address" /></td>
    </tr>
    <tr>
      <td>標題：</td>
      <td><input type="text" name="title" id="title" /></td>
    </tr>
    <tr>
      <td>簡介：</td>
      <td><input type="text" name="desc" id="desc" /></td>
    </tr>
    <tr>
      <td>內容：</td>
      <td><input type="text" name="content" id="content" /></td>
    </tr>
    <tr>
      <td>圖片：</td>
      <td id="upload_box"><div class="upload_item" index="0" style="display:none;"><span class="upload_item_add">+</span>
          <input type="file" name="pics" id="pics" class="upload_input" />
        </div>
        <div class="upload_item" index="1"><span class="upload_item_add">+</span>
          <input type="file" name="pics" id="pics" class="upload_input" />
        </div></td>
    </tr>
    <tr>
      <td>價格：</td>
      <td><input type="text" name="price" id="price" /></td>
    </tr>
    <tr>
      <td>標籤：</td>
      <td><input type="text" name="tags" id="tags" /></td>
    </tr>
    <tr>
      <td colspan="2"><input type="submit" value="提交" /></td>
    </tr>
  </table>
</form>