可以选中多个文件，顺序上传，每个文件都有一个上传情况进度条。
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;