history Zookeeper 计算机基础知识 跨域 整数转换 ajax sharepoint scripting 管理后台ui 找公司做网站 php零基础入门视频 纯html网页模板 mac安装hadoop matlab停止运行命令 手机banner常用尺寸 excel动态图表制作 less比较级 mysql配置远程连接 python功能 python获取日期 python内置库 python安装环境变量 java迭代器 java链接mysql数据库 java代码注释 java的集合 java接口开发 linuxgrep EasyCHM js绝对值 vue上传文件 心理学与生活pdf 模拟人生2夜生活 彩虹岛小草黑暗之矛 skycc组合营销软件 微信猜拳 万能低格工具还原u盘 数据结构与算法分析 pp安卓助手 0000008e
当前位置: 首页 > 学习教程  > 编程语言

【nodejs】multer插件批量上传

2020/10/8 20:31:16 文章标签:

multer插件 批量上传视频 可以选中多个文件&#xff0c;顺序上传&#xff0c;每个文件都有一个上传情况进度条。 HTML部分&#xff1a; <body><div><div class"uploadvideo"><span>选择视频文件</span><input id"videoinfo …

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;

本文链接: http://www.dtmao.cc/news_show_250319.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?