视频分片上传，断点续传

样式

      <div class="body-inner">
        <div class="input_contant" style="display: block;margin-bottom: 10px;">
          <label id="realBtn" class="btn btn-info">
            <input name="file" id="videos" type="file" accept="video/*" @change="selectOtherVideo(this)"
              style="left:-9999px;position:absolute;">
            <span style=" 100%;display: inline-block;"><i class="el-icon-video-camera"></i> 视频上传( ≤1GB )</span>
          </label>
        </div>
        <div class="upload-content-span">
          // 进度条
          <div id="upload-progress">
            <el-progress :percentage="percent" color="#67c23a" id='progress'></el-progress>
          </div>
          //  上传成功后显示内容
          <div id="preview_course_video_text"></div>
          <div id="upload-video-status">上传成功</div>
          <div id="upload-progress-text">
            上传速度取决于您的网速，请耐心等待...
            <!--<span class="upload-progress-cancel">取消上传</span> -->
          </div>
        </div>
      </div>

js上传

selectOtherVideo() {
      var c = document.getElementById('upload-video-status')
      var d = document.getElementById('upload-progress-text')
      var e = document.getElementById('upload-progress')
      var f = document.getElementById('preview_course_video_text')

      c.style.display = 'none'
      d.style.display = 'none'
      f.style.display = 'none'
      this.beginUploadVideo()
    },
    // 分片上传
    beginUploadVideo() {
      this.submFlag = true;
      var fileName = ""
      var videoUrl = ""
      if (!document.all) {  // IE11，Chrome，FF
        var files = document.getElementById('videos').files;
        // console.log(files, 'files');
        if (files.length == 0) {
          alert("请先上传视频!")
          return false;
        } else if (files[0].size > (1024 * 1024 * 1024)) {
          alert('视频大小不能大于1GB')
          return false;
        }
        fileName = files[0].name
        videoUrl = files[0]
      } else {
        // IE10
        if (!isIE9()) {
          if (!FileReader.prototype.readAsBinaryString) {
            var files = document.getElementById('videos').files[0];
            fileName = files.name
            videoUrl = files
            if (files.size > (1024 * 1024 * 1024)) {
              alert('视频大小不能大于1GB')
              return false;
            }
          }
        }
      }
      document.getElementById('videos').disabled = true
      document.getElementById('upload-progress').style.display = 'block'
      var blockSize = 8 * 1024 * 1024;//每块的大小
      // console.log(videoUrl, blockSize)
      // console.log(Math.ceil(videoUrl.size / blockSize))
      var count = Math.ceil(videoUrl.size / blockSize) // 总块数
      this.readChunk(videoUrl, count, blockSize)
    },
    getChunkInfo(file, currentChunk, chunkSize) {
      let start = currentChunk * chunkSize
      let end = Math.min(file.size, start + chunkSize)
      let chunk = file.slice(start, end)
      // console.log(start, end, chunk)
      return { start, end, chunk }
    },
    // 针对每个文件进行chunk处理
    readChunk(file, chunkCount, chunkSize) {
      // 针对单个文件进行chunk上传
      // console.log(file, chunkCount, chunkSize)
      let i = 0
      let uuid = ''
      let offset = 0
      let complete = false
      this.uploadChunk({ file, uuid, offset, complete, chunkCount, currentChunk: i, chunkSize })
      // }
    },
    uploadChunk(chunkInfo) {
      // console.log(chunkInfo)
      var data = {
        uuid: chunkInfo.uuid,
        offset: chunkInfo.offset,
        complete: chunkInfo.chunkCount == 1 ? true : chunkInfo.complete
      }
      // console.log("总片数" + chunkInfo.chunkCount)
      // console.log("第" + chunkInfo.currentChunk + '分片')
      var { chunk, start, end } = this.getChunkInfo(chunkInfo.file, chunkInfo.currentChunk, chunkInfo.chunkSize)
      var fileData = new window.File([chunkInfo.file.slice(start, end)], chunkInfo.file.name, { type: chunkInfo.file.type })
      // console.log(fileData, start, end, '截取。。。。。。。。。。。。。。。。。')
      this.percent = Math.floor((chunkInfo.currentChunk / chunkInfo.chunkCount) * 100)
      document.getElementById('progress').style.width = '190px'
      getFragmentationUploadUrl(data).then(res => {
        if (res.code == 200) {
          sessionStorage.setItem('uuid', res.data.uuid)
          var formData = new FormData();//初始化一个FormData对象
          formData.append("file", fileData);//将 部分文件 塞入FormData
          document.getElementById('upload-progress-text').style.display = 'block'
          document.getElementById('upload-progress').style.display = 'block'
          axios.request({
            url: res.data.url, /*设置post提交到的页面*/
            method: "post", /*设置表单以post方法提交*/
            data: formData,
            headers: {
              token: getToken()
            },
            // responseType: "blob",
            //使用XMLHttpRequest.upload监听上传过程，注册progress事件，打印回调函数中的event事件
            onDownloadProgress(progress) {
              // console.log(progress, '++++++++++++++++++++++++++')
              // var progressRate = (chunkInfo.currentChunk / chunkInfo.chunkCount) * 100
              document.getElementById('progress').style.width = '190px'
              this.percent = Math.floor((progress.loaded / progress.total) / chunkInfo.chunkCount * 100 + (chunkInfo.currentChunk / chunkInfo.chunkCount) * 100)
            }
          }).then(res => {
            // console.log(res);
            let data = res.data
            if (data.code == 1) {
              // console.log(101010);
              let list = chunkInfo
              list.currentChunk += 1
              // console.log("第" + list.currentChunk + '张上传成功+++++++++++++')
              if (list.currentChunk == list.chunkCount) {
                this.percent = 100
                document.getElementById('progress').style.width = '100%'
                // console.log('停+++++++++++++')
                document.getElementById('videos').disabled = false
                document.getElementById("preview_course_video_text").innerHTML = '视频ID:' + data.resultObject.archiveId
                document.getElementById("preview_course_video_text").style.display = 'block'
                document.getElementById('upload-progress-text').style.display = 'none'
                document.getElementById('upload-video-status').style.color = '#1ea725'
                document.getElementById('upload-video-status').style.display = 'none'
                this.$message({ type: "success", message: "上传成功!" });
                this.ruleForm.archiveId = data.resultObject.archiveId;
                this.ruleForm.duration = data.resultObject.duration;
                this.ruleForm.fileSize = parseInt(data.resultObject.fileSize);
                this.submFlag = false;
                document.getElementById('videos').value = ''
                return false
              }
             // created 定义stop:0 
             // 取消时  stop=1  中断上传
              if (this.stop == 1) {
                this.$message({ type: "warning", message: "已取消上传!" })
                document.getElementById('videos').value = ''
                document.getElementById('videos').disabled = false
                return false
              }
              // console.log("不停--------------")
              list.offset = data.resultObject.offset
              list.uuid = sessionStorage.getItem('uuid')
              if (list.currentChunk == list.chunkCount - 1) {
                list.complete = true
              } else {
                list.complete = false
              }
              this.uploadChunk(list)
            } else {
              document.getElementById('videos').disabled = false
              document.getElementById('videos').value = ''
              document.getElementById('upload-video-status').innerHTML = "上传失败"
              document.getElementById('upload-video-status').style.color = '#ff0000'
              document.getElementById('upload-video-status').style.display = 'block'
              document.getElementById('upload-progress-text').style.display = 'none'
              this.submFlag = false;
              let list = chunkInfo
              list.offset = start
              // console.log(list, '继续上传')
              sessionStorage.setItem('chunkList', JSON.stringify(list))
            }
          }).catch(error => {
            document.getElementById('videos').disabled = false
            document.getElementById('videos').value = ''
            document.getElementById('upload-progress-text').style.display = 'none'
            document.getElementById('upload-video-status').innerHTML = "上传失败"
            document.getElementById('upload-video-status').style.color = '#ff0000'
            document.getElementById('upload-video-status').style.display = 'block'
            this.submFlag = false;
            let list = chunkInfo
            list.offset = start
            // console.log(list, '继续上传')
            sessionStorage.setItem('chunkList', JSON.stringify(list))
          })
        } else {
          console.log(res.msg);
        }
      }).catch(err => {
        console.log(err);
      })
    },
 //  继续上传失败的部分
   goOnUploadVideo() {
     var files = document.getElementById('videos').files[0];
     var list = JSON.parse(sessionStorage.getItem('chunkList'))
      console.log(files, list, '继续');
      list.uuid = sessionStorage.getItem('uuid')
      list.file = files
       this.uploadChunk(list)
     },

jQuery上传

// 分片上传
// 开始上传视频
function beginUploadVideo() {
    var fileName = ""
    var videoUrl = ""
    if (!document.all) {  // IE11，Chrome，FF
        var files = document.getElementById('videos').files;
        if (files.length == 0) {
            alert("请先上传视频!")
            return false;
        } else if (files[0].size > (1024 * 1024 * 1024)) {
            alert('视频大小不能大于1GB')
            return false;
        }
        fileName = files[0].name
        videoUrl = files[0]
    } else {
        // IE10
        if (!isIE9()) {
            if (!FileReader.prototype.readAsBinaryString) {
                var files = document.getElementById('videos').files[0];
                fileName = files.name
                videoUrl = files
                if (files.size > (1024 * 1024 * 1024)) {
                    alert('视频大小不能大于1GB')
                    return false;
                }
            }
        }
    }
    var blockSize = 8 * 1024 * 1024;//每块的大小
    // console.log(videoUrl, blockSize)
    // console.log(Math.ceil(videoUrl.size / blockSize))
    var count = Math.ceil(videoUrl.size / blockSize) // 总块数
    readChunk(videoUrl, count, blockSize)
}
function getChunkInfo(file, currentChunk, chunkSize) {
    // console.log('2222222222--------------')
    let start = currentChunk * chunkSize
    let end = Math.min(file.size, start + chunkSize)
    let chunk = file.slice(start, end)
    // console.log(start, end, chunk)
    return { start, end, chunk }
}
// 针对每个文件进行chunk处理
function readChunk(file, chunkCount, chunkSize) {
    // console.log('11111111--------------')
    // 针对单个文件进行chunk上传
    // console.log(file, chunkCount, chunkSize)
    let i = 0
    let uuid = ''
    let offset = 0
    let complete = false
    uploadChunk({ file, uuid, offset, complete, chunkCount, currentChunk: i, chunkSize })
    // }
}

// 获取建学唐上传视频地址
function uploadChunk(chunkInfo) {
    // console.log('3333333--------------')
    // console.log(chunkInfo)
    var data = {
        uuid: chunkInfo.uuid,
        offset: chunkInfo.offset,
        complete: chunkInfo.chunkCount == 1 ? true : chunkInfo.complete
    }
    // console.log("总片数" + chunkInfo.chunkCount)
    // console.log("第" + chunkInfo.currentChunk + '分片')
    var { chunk, start, end } = getChunkInfo(chunkInfo.file, chunkInfo.currentChunk, chunkInfo.chunkSize)
    var fileData = new window.File([chunkInfo.file.slice(start, end)], chunkInfo.file.name, { type: chunkInfo.file.type })
    // console.log(fileData, start, end, '截取。。。。。。。。。。。。。。。。。')
    var percent = (chunkInfo.currentChunk / chunkInfo.chunkCount) * 100
    $('.upload-progress-inner').css('width', percent + '%');
    $.ajax({
        // 接口,
        url: 接口,
        type: "POST",
        cache: false,
        data: JSON.stringify(data),
        headers: {
            token: sessionStorage.getItem("HXKToken")
        },
        processData: false,
        contentType: "application/json",
        dataType: "json",
        success: function (res) {
            // console.log("分片上传返回信息：")
            // console.log(res.data.url, res.data.uuid, chunkInfo.offset)
            if (res.code == 200) {
                // sessionStorage.setItem('VideoUploadUrl', res.data.url)
                sessionStorage.setItem('uuid', res.data.uuid)
                $("#submitVideoButton").removeAttr("disabled")
                // var apiUrl = sessionStorage.getItem('VideoUploadUrl')
                // var uuid = sessionStorage.getItem('uuid')
                var formData = new FormData();//初始化一个FormData对象
                formData.append("file", fileData);//将 部分文件 塞入FormData
                // formData.append("uuid", res.data.uuid);//保存文件名字
                // formData.append("offset", chunkInfo.offset);//保存文件名字
                // formData.append("complete", chunkInfo.complete);//保存文件名字
                // console.log(formData)
                $(".upload-video-status").text("视频上传中...").css({
                    "display": "block",
                    "color": "#069af0",
                })
                $(".upload-progress-text").css({ "display": "block" });
                $(".upload-progress").css({ "display": "block" });
                $("#submitVideoButton").attr("disabled", 'disabled'); // 禁掉提交按钮
                $.ajax({
                    url: res.data.url, /*设置post提交到的页面*/
                    type: "post", /*设置表单以post方法提交*/
                    cache: false,
                    data: formData,
                    dataType: "json", /*设置返回值类型为文本*/
                    headers: {
                        token: sessionStorage.getItem("HXKToken")
                    },
                    processData: false,
                    contentType: false,  // 告诉jQuery不要去设置Content-Type请求头
                    xhr: function () { // 增加 progress 事件绑定
                        $("#videos").attr("disabled", "disabled")   // 禁掉选择视频按钮
                        $(".upload-progress-inner").css("background", "#07c160"); // 把上传条调转为绿色
                        var xhr = new XMLHttpRequest();
                        //使用XMLHttpRequest.upload监听上传过程，注册progress事件，打印回调函数中的event事件
                        xhr.upload.addEventListener('progress', function (e) {
                            // console.log(e, '++++++++++++++++++++++++++')
                            // var progressRate = (chunkInfo.currentChunk / chunkInfo.chunkCount) * 100
                            var progressRate = (e.loaded / e.total) / chunkInfo.chunkCount * 100 + (chunkInfo.currentChunk / chunkInfo.chunkCount) * 100
                            // var realProgress = progressRate == 100 ? 98 : progressRate;
                            //通过设置进度条的宽度达到效果
                            $('.upload-progress-inner').css('width', progressRate + '%');
                        })
                        return xhr;
                    },
                    success: function (data) {
                        if (data.code == 1) {
                            // console.log(data, '上传成功返回数据--------------------')
                            // $('.upload-progress-inner').css('width', '100%');
                            $("#video_archiveId").text(data.resultObject.archiveId)
                            $("#video_fileSize").text(data.resultObject.fileSize)
                            $("#video_duration").text(data.resultObject.duration)
                            let list = chunkInfo
                            list.currentChunk += 1
                            // console.log(list.currentChunk, list.chunkCount)
                            // console.log("第" + list.currentChunk + '张上传成功+++++++++++++')
                            if (list.currentChunk == list.chunkCount) {
                                // console.log('停+++++++++++++')
                                $("#videos").removeAttr("disabled")
                                $("#preview_course_video_text").text("视频ID：" + data.resultObject.archiveId)
                                $(".upload-progress-text").css({ "display": "none" });
                                $(".upload-video-status").text("上传成功").css({
                                    "display": "block",
                                    "color": "#1ea725",
                                });
                                $("#submitVideoButton").val("已上传")
                                $('#submitVideoButton').css({ 'display': 'inline-block' })
                                $('#goOnVideoButton').css({ 'display': 'none' })
                                $("#submitVideoButton").attr("disabled", "disabled")
                                return false
                            }
                            // console.log("不停--------------")
                            list.offset = data.resultObject.offset
                            list.uuid = sessionStorage.getItem('uuid')
                            // console.log(data.resultObject.offset, list)
                            if (list.currentChunk == list.chunkCount - 1) {
                                list.complete = true
                            } else {
                                list.complete = false
                            }
                            // console.log($("#submitVideoButton").val())
                            uploadChunk(list)
                        } else {
                            $(".upload-progress-inner").css("background", "#ff0000") // 把上传条调转为红色
                            $('#submitVideoButton').css({ 'display': 'none' })
                            $('#goOnVideoButton').css({ 'display': 'inline-block' })
                            $("#goOnVideoButton").removeAttr("disabled")
                            $(".upload-video-status").text("上传失败").css({
                                "display": "block",
                                "color": "#ff0000",
                            });
                            // alert(data.msg)
                            // console.log($("#submitVideoButton").val())
                            let list = chunkInfo
                            list.offset = start
                            // list.uuid = sessionStorage.getItem('uuid')
                            // console.log(list, '继续上传')
                            sessionStorage.setItem('chunkList', JSON.stringify(list))
                        }
                    },
                    error: function (error) {
                        $("#videos").removeAttr("disabled")
                        $('#submitVideoButton').removeAttr("disabled");
                        $(".upload-progress-inner").css({ "background": "#ff0000" }); // 把上传条调转为红色
                        $(".upload-progress-text").css({ "display": "none" });
                        $('#submitVideoButton').css({ 'display': 'none' })
                        $('#goOnVideoButton').css({ 'display': 'inline-block' })
                        $("#goOnVideoButton").removeAttr("disabled")
                        $(".upload-video-status").text("上传失败").css({
                            "display": "block",
                            "color": "#ff0000",
                        });
                        // alert(error.responseJSON.msg);
                        // console.log($("#submitVideoButton").val())
                        let list = chunkInfo
                        list.offset = start
                        // list.uuid = sessionStorage.getItem('uuid')
                        // console.log(list, '继续上传')
                        sessionStorage.setItem('chunkList', JSON.stringify(list))
                    },
                });
            } else {
                $("#submitVideoButton").removeAttr("disabled")
                alert(res.msg);
            }
        },
        error: function (err) {
            $("#submitVideoButton").removeAttr("disabled")
            alert("获取上传视频地址失败！")
        }
    })
}

function goOnUploadVideo() {
    var files = document.getElementById('videos').files[0];
    var list = JSON.parse(sessionStorage.getItem('chunkList'))
    list.uuid = sessionStorage.getItem('uuid')
    list.file = files
    uploadChunk(list)
    $("#goOnVideoButton").attr("disabled", "disabled")
}