断点续传原理及运用

一，断点续传（断点续传其实就是把文件分割的过程，一段一段的传。）

断点续传需要和后端进行配合进行处理，这里我提供一下后端那边提供的接口

1，后端接口提供

其实原理也很简单说白了，就是我们把本地的大型文件或者视频使用slice进行分割，然后传给后台，同时需要提供给后台当前分割的索引和一共要分成多少份。（废话不多说，上代码）

2，前端代码部署

点击上传按钮方法

    filesVide() {
      // 视频上传
      this.datafile=this.$refs.file.files[0];
      // 上传的文件的大小
      this.size=(this.datafile.size/1024/1024).toFixed(1);
      this.filesize = this.datafile.size;
      this.fileName = this.datafile.name;
      // 判断后缀
      var index=this.datafile.name.lastIndexOf('.');
      var type1=this.datafile.name.slice(index+1);
      // 进行判断是不是mp4格式，如果不是进行提示处理
      if(type1!=='mp4'||this.filesize>1024*1024*500){
        // 提示处理
        this.MP4sp=true;
        this.clearTimers();
        this.$refs.file.value='';
        return;
      }
      // 以下为一些提示处理（可以先不用考虑）
      this.cut=true;
      this.videcut=false;
      this.cutvide=false;
      this.index=0;
      this.baifenbi=0;
      this.suo=true;
      this.start=0;
      this.end=0;
      // 一共多少个片段戳（bytesPerPiece=1024*1024表示每次上传的大小为1m）
      this.total = Math.ceil(this.filesize / this.bytesPerPiece);
      // 时间戳
      this.timestamp=new Date().getTime();    
      // 进行上传的代码片段
      this.pianduanfiles();
    },

这个地方是点击上传时需要进行的处理。

进行循环执行的代码

    pianduanfiles(){
      // 用于判断是否已经结束
      if(this.start < this.filesize&&this.suo){
        // 开始的数量加上每次上传的数量（bytesPerPiece=1024*1024）每次上传1m
        this.end = this.start + this.bytesPerPiece;
        // 如果结束时的大小大于文件大小，说明上传完毕
        if(this.end > this.filesize) {
          this.end = this.filesize;
        }
        // 对开始的值和结束的值就行切割，每次循环开始的值和结束的值默认加1m
        this.chunk = this.datafile.slice(this.start,this.end);//切割文件   
        // 方法执行 
        var  params  =  new  FormData();
        params.append('video', this.chunk);
        params.append('roadShowId',  this.information);
        params.append('fileName',  this.fileName);
        params.append('index', this.index);
        params.append('total',  this.total);
        params.append('timestamp',  this.timestamp);
        axios.post(this.HTTP + 'roadshows/video/investor/add', params , {
          headers: {
            'auth-signature': this.token
          }
        }).then(res => {
          // 调用成功后让结束的值等于开始的值，同时判断是否结束续传如果是300继续循环执行该方法，如果200说明结束
          this.start=this.end;
          // 当前索引加一
          this.index++;
          // 上传视频进行百分比编写
          this.baifenbi=Math.round((this.index/this.total)*100)
          if(res.data.code==300){
            console.log(res,'300')
            // setTimeout(()=>{
              this.pianduanfiles();
            // },100)
          }
          if(res.data.code==200){
            this.cutvide=true;
            this.url=res.data.data.path;
            console.log(res,'200')
            // this.load()  
          }
          if(res.data.code==4005){
            alert('当前房间未开放视频上传功能!')
          }
        }, err => {
          console.log(err);
        })
      }
    },

大致原理，和需要添加的都在代码里面有注释，如有什么不明白欢迎评论区提问！