斷點續傳原理及運用

一，斷點續傳（斷點續傳其實就是把文件分割的過程，一段一段的傳。）

斷點續傳需要和后端進行配合進行處理，這里我提供一下后端那邊提供的接口

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);
        })
      }
 },

大致原理，和需要添加的都在代碼里面有注釋，如有什么不明白歡迎評論區提問！