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();
	        }
        }
经验分享 程序员 微信小程序 职场和发展