pc端视频分片上传ajax

定义全局变量

var isUpload = false; //是否是上传中
var chat_id = $(".chat_id").val();
let checkpoint_temp_matter; //断点变量
let isAbort_matter = false; //是否中断上传
let path_matter = "";
let accessKeyId_matter = "";
let accessKeySecret_matter  = "";
let stsToken_matter  = "";
let endpoint_matter  = "";
let bucket_matter  = "";
let filename_matter  = "";
let complete = 0;
let clipNumcer = 0;
let domain_matter  = window.location.origin;
let client_matter ;
let bytesPerPiece= 3 * 1024 * 1024//分片大小
let nowname_matter ;
let videoSlicingData = [];

先选择文件 ，将文件分割成片 循环调试接口，到完成

  let videoSlicing= function (file) {
  let start = 0;
  let end;
  isUpload = true;
  let index = 0;
   let allOk = 0;
  let filesize = file.size;
  let filename = file.name;
  let type= file.type;
  let time = parseInt(new Date().getTime() / 1000);
  videoSlicingData = [] ;
  //计算文件切片总数
  while (start < filesize) {
    end = start + bytesPerPiece;
    if (end >= filesize) {
      end = filesize;
      allOk = 1
    }
    let chunk = file.slice(start, end);//切割文件  
    console.log("切割的文件",chunk)
    videoSlicingData.push({
      'file': chunk,
      'name': filename,
      'lastmodified': time,
      "allOk":allOk,
      'size':chunk.size,
      "webkitRelativePath": "",
      'type':type,
      'index':index,
      'isUpload': false,
    })
    start = end;
    index++;
  }
 
   uploadVideo(0);
}
let  uploadVideo =function(index){
    if(videoSlicingData[0]){
        videoSlicingData[0].isUpload = true
    }
    let val = videoSlicingData[index];
    let isAllok = val.allOk;
    Reflect.deleteProperty(val, 'allOk')
    getVideoSrc(val.file,val.name,  index, isAllok) 
}

分片上传

  let  getVideoSrc=function(file, name, sum, complete) {
        let progress = (sum+1)/videoSlicingData.length;
       var formData = new FormData()
       formData.append("multipartFile", file);
      $.ajax({
        url: ,
        type: 'post',
        dataType: "json",
        data: formData,
        cache: false,
        processData: false,
        contentType: false,
        success: function (data) {
          if (data.code == 200) {
              } 
               if((sum+1)==videoSlicingData.length ){
                   return  false;
               }else{
                   videoSlicingData[sum+1].isUpload = true
                   uploadVideo(sum+1)
               }
              
          } else {
                commonPop("上传失败");
                 $(".progress-box").hide()
          }
        },
        error: function () {        
        }
      })
    }

计算进度

var progress_matter  = function (p) {
     $(".progress-box").show()
        var file = document.getElementById('upload-key-file-matter').files[0];
        isUpload = true;
        var bar = document.getElementById('upload-progress-bar-matter');
        bar.style.width = Math.floor(p * 100) + '%';
        $(bar).html(Math.floor(p * 100) + '%');
};

点击上传按钮，监听上传文件

 $(function(){
    $("#upload-key-file-matter").click(function () {
        if (isUpload) {
            commonPop("文件正在上传");
            return false;
        }
    });
    $('#upload-key-file-matter').on("change", function () {
        nowname_matter = $('#upload-key-file-matter')[0].files[0];
        var file = $('#upload-key-file-matter')[0].files[0];
        console.log("打印这个文件的数据", file);
        if (!file) {
            return commonPop("请选择上传文件！");
        }
        var arr = file.name.split(".");
        var suffix = arr[arr.length-1];
        suffix = suffix.toLowerCase();
        if(suffix!="mp4"){
            return commonPop("请选择MP4格式");
        }
        if(file.size > 10737418240){
            return commonPop("请选择10GB以内的音视频文件");
        }
        videoSlicing(file,0);
    })
 })

上传按钮效果

window.onload = function () {  
 $(".a-change").hover(function () {
      $(".upload-tips").css("display", "block");
    }, function () {
         $(".upload-tips").css("display", "none");
     });
}

断点续传

window.onbeforeunload = function (event) {
    if (isUpload) {
        return "您的文件正在上传中，继续操作会中断上传，要继续吗？" //这里内容不会显示在提示框，为了增加语义化。
    }
};