【nodejs】multer外掛批量上傳

白以歌發表於2020-10-08
NodeJS

multer外掛

批量上傳視訊

可以選中多個檔案，順序上傳，每個檔案都有一個上傳情況進度條。

HTML部分：

<body>
  <div>
      <div class="uploadvideo">
        <span>選擇視訊檔案</span>
        <input id="videoinfo type="file" multiple accept="video/*">
      </div>
      <button>開始上傳</button>
  </div>
  <div class="videolist"></div>
  <script src="js/jquery-1.9.1.js"></script>
  <script>
    let filesEle = $("#videoinfo")[0];
    $("#videoinfo").change(function(){
    var str="";
      for(var i=0;i<this.files.length;i++)
      {
      //.progress進度條
        str+=`<div class="boxlist"><span>${i+1}.${this.files[i].name}</span>
              <div class='progress'>
                  <div class="prolist"></div>
              </div>
                   </div>`;
        
      }
      $(".videolist").html(str);
    });
    $("#btnstart").click(function(){
      if(filesEle.files.length == 0){
        alert("請選擇檔案！");
        return;
      }
     
      
      for(let i=0;i<fileEle.files.length;i++)
      {	
         var formData=new FormData();
         var file=filesEle.files[i];
         formData.append(file.name,file);
          $.ajax({
           method:'post',
           data:formData,
           url:'http://localhost:8080/uploadvideo',
           processData:false,
           contentType:false,
           xhr:function(){
             var xhr = $.ajaxSetting.xhr();
             if(xhr)
             {
               xhr.upload.addEventLlistener("progress",progressBar,false);
               return xhr;
             }
           },
           success:function(result){
              console.log(result);
           }
         });
         function progressBar(e){
            var bai = (e.loaded/e.total)*100;
            $.(".prolist").eq(i).css({
                width:bai+"%"
            });
            if(bai==100)
            {
              $(".boxlist").eq(i).remove();
            }
         }
      }
       
    });
  </script>

</body>

JS部分：



//安裝依賴 “cnpm install --save multer”
//引入multer元件
const multer = require("multer");
//配置視訊檔案的儲存路徑以及視訊檔案的名稱格式
const multervideo = multer.diskStorage({
  destination(){
    //配置儲存路徑 cb為內建的回撥函式，file是傳入的檔案
    cb(null,'./static/video');
  },
  filename(req,file,cb){
    //配置檔名稱的方法
    //獲取當前檔案的字尾
    let extname=file.originalname();
    cb(null,file.name);
  }
})

const multer = require("formidable");



//視訊的批量上傳的介面
//配置路由
router.post("/uploadvideo",(req,res)=>{
 //建立批量上傳物件
 let videoupload = multer(multervideo).any();
 videoupload(req,res,(err)=>{
  if(err)
    throw err;
  req.files
});
  res.send("success");
});

module.exports = router;

相關文章