vue中使用element分批上传文件
使用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();
}
}
