使用element-ui的upload批量上传文件时会有一个问题，就是用户一次性上传上百个视频，浏览器会直接卡死，所以这个时候需要对上传文件进行一些分批操作。
<el-upload class="upload-demo" drag :auto-upload="true" action="#" multiple :limit="maxLen" :on-preview="onPreview" :on-change="handleChange" :on-success="handleVideoSuccess" :http-request="uploadSuccess" :on-remove="handleRemove" :on-exceed="handleExceed" :before-upload="beforeUploadVideo" :file-list="fileList" ref="upload" > </el-upload>
//分批上传视频 splitUpload(){ let arr = []; let val = ''; //每次最多同时上传5个文件 while(arr.length < 5 && this.forUpload.length > 0){ val = this.forUpload.shift(); let formDataV = new FormData() formDataV.append('video', val.file) arr.push(material_uploadMaterialVideo_api(formDataV)) } Promise.all(arr).then(arr=> { arr.forEach(res => { if (res.code == 1){ this.uploadedFileList.push({"video_path":res.data.path,"name":val.file.name,"id":res.data.id}); }else{ this.$message({ message: res.sub_msg, type: 'error' }) } }) if(this.forUpload.length > 0) this.splitUpload(); else{ this.loading = false; this.$message({ message: '视频上传成功', type: 'success' }) } }) }, //自动上传的方法 uploadSuccess(val) { //调接口 this.loading = true let formDataV = new FormData() formDataV.append('video', val.file) this.forUpload.push(val); //接收完列表的文件后开始分批上传 if(this.forUpload.length == this.fileList.length){ this.splitUpload(); } }
