Js+Video，分片上傳、斷點續傳

前言

項目開發中，涉及文件上傳的問題，針對於性能以及技術實現上，高頻出現的一個名詞---分片，以及根據實際項目需求可能還會涉及到斷點續傳的操做；

今天我們就來聊一下，分片以及斷點續傳的那些事~

方案分析

• 背景

  業務需求，video上傳，涉及整個file過大的狀況，動則幾個G甚至十幾個G的狀況，須要切割分片上傳；

  分片：顧名思義，將大片切割成性能優化的小片，以便於服務的接收；

  其後，當分片上傳的問題解決後，視頻的完整可合併性以及先後端分片的同步邏輯就是咱們下一步須要考量的問題了；

• 分片流程以及流程說明

  1. 校驗--文件資源大小、格式限制 ~ 限定資源大小是否可控
  2. 視頻標識--生成文件惟一 id（MD5） ~ 常規項目應脫離用戶態，以每個資源爲惟一 id，避免資源耦合濫用
  3. 分片--片尺寸切割、片數 ~ 限定每片的大小、以及總片數
  4. 鑑權 ~ 當前視頻狀態，已被上傳，或須要續傳，或能夠正常上傳
  5. 鑑權續傳(異常分片，走斷點續傳) ~ 可能涉及該視頻續傳，因此須要以鑑權獲取已上傳的分片數和原視頻盡享對比，再次上傳；
  6. 依次上傳分片 ~ 成功delete 失敗暫存

• 斷點上傳

  1. 分片失敗後，當即上傳（即失敗分片數被暫存） ~ 正常流程，失敗的片數，可暫存變量體系，而後進入續傳的等待操做區

• 斷點續傳

  2. 一段時間後或刷新頁面丟失此文件狀態時處理上傳 ~ 非正常狀況，本地變量丟失，需從新讀取片數並篩選未上傳的片數

具體邏輯流程

閱讀建議：如下代碼並不能表明完整流程，只是將方案的核心方法簡化羅列了一下，因此建議你們fileOutput文件入口看步驟，瞭解下思路目的就達到了；固然有意向的小夥伴理清步驟後，能夠看下每一個步驟具體方法實現；

• Html

  <label for="upvideo"></label>
  <input accept="audio/mp4, video/mp4" style="display:none" id="upvideo" onchange="fileOutput" type="file" />
  注：label for 上傳樣式
  複製代碼

• Script ---> File入口

  參數配置區域
  this.limitSize // 文件大小
  this.fileArr // 文件分片數組 可用於暫存分片數
  async fileOutput (e) {
  // 文件輸出口
  // 第一步 校驗文件
  // 針對格式大小的初步過濾
  await this._fileCheck(e) // 文件格式 大小校驗
  
  // 第二步 視頻標識
  // 每一個視頻須要生成惟一id，這裏以每一個視頻前5m做爲標識
  const mdskey = await this._getMd5(e.target.files[0], 1024 * 1024 * 5) // md5 視頻惟一標識
  
  // 第三步 分片
  // 獲取分片數 分片文件 可配置每片的大小
  // 這裏以每片5M爲例，固然片數的大小取決於服務器的一個負載能力以及後期用戶網速問題，因此建議每片不要過大，10m左右便可，這裏我們以5M爲例
  const fileArr = await this._getVideoFilsGrouping(e.target.files[0], 1024 * 1024 * 5) // 分片
  
  // 第四步 校驗視頻狀態
  // 以md5標識驗證當前傳輸視頻 是歸屬於續傳仍是正常流程 下面爲模擬api請求
  const { data } = await this.$fetch.demo({total: Object.keys(fileArr).length, md5: mdskey}) // 受權 data 已上傳的分片
  
  // 第五步 刪除分片
  // 上述若是該視頻存在續傳狀況 要相應對比 刪除多餘分片
  await this._deleteKey(result, data)
  
  // 第六步 上傳分片 data（可從新定義變量，也可直接使用，建議從新定義，結構清晰）  
  this._forEachUp(data)
  // 涉及斷點上傳 從新在走 this.forEachUp(data) 便可
  // 不建議無線遞歸次上傳方法，交互最好有個異常提示框讓用戶選擇是否 斷點上傳，即主動非被動；
  }
  複製代碼

  詳細Function ---> 每一個Funtion作了什麼事？

• _fileCheck

  _fileCheck (e) {
  // 文件格式 大小校驗
  return new Promise((resolve, reject) => {
   if (!(e.target.files[0] && e.target.files[0].type)) {
   // 視頻有效性驗證
     document.getElementById('upvideo').value = null
     return
   }
   if (this.limitSize < blob.size) {
     // 最大不能超過多少
     return
   }
   resolve(1)
  })
  }
  複製代碼

• _getMd5

  _getMd5 (blob, size) {
   // md5 對應文件惟一標識
   // size 默認視頻前5M做爲此視頻惟一標識，理論上MD5可加密任意字符，可是你要相信對於js來講必定有性能瓶頸，因此不 建議過大，若是需求須要，也儘可能建議不要超過30m
   return new Promise((resolve, reject) => {
   if (!blob) return
   blob = blob.slice(0, size, 'video/mp4')
   const reader = new FileReader()
   reader.readAsArrayBuffer(blob)
   reader.onload = (el) => {
    /* --- 將 Unicode 編碼轉爲一個字符 area --- */
    var binary = ''
    var bytes = new Uint8Array(el.target.result)
    var length = bytes.byteLength
    for(var i = 0; i< length; i ++){
      binary += String.fromCharCode(bytes[i])
    }
    /* --- 將 Unicode 編碼轉爲一個字符 area --- */
    const md5str = CryptoJS.MD5(CryptoJS.enc.Latin1.parse(binary)).toString()
    resolve(md5str)
  }
  })
  }
  
   知識點：
   1. 加密方式非惟一，僅先後端統一便可；
   2. 上述爲buffer ---> 8位轉碼字符 ---> 字符集Latin1編碼 ---> MD5;
   3. 上述binary最終其實就是一串二進制編碼，整個編碼區其實能夠被 reader.readAsBinaryString(blob)   替換，但因爲readAsBinaryString是非標，並且12年已經被移出W3C草案，因此不建議使用，但不表明必定不能用，兼容問題自行斟酌；
  複製代碼

• _getVideoFilsGrouping

  // 獲得視頻流分組
  _getVideoFilsGrouping (blob, size) {
  return new Promise((resolve, reject) => {
    const len = size || 1024 * 1024 // 2 = 1021 * 1024
    const frist = parseInt(blob.size / len) // 分組 正常格式長度數量
    const second = blob.size % len ? 1 : 0 // 分組 含有剩餘分至1組
    const allnum = frist + second // 總分組量
    this.allnum = allnum
    let fileObject = {} // 數據流詳細分組容器
    if (allnum) {
      if (frist) {
        for (let i = 1; i <= allnum; i++) {
          fileObject[i] = blob.slice((i - 1) * len, len + len * (i - 1), 'video/mp4')
        }
      } else {
        fileObject[1] = blob
      }
    }
    resolve(fileObject)
  })
  }
  注意點： 因自己視頻分片不存在特殊標識，亦考慮性能，先後端每片以順序做爲每片標識
  複製代碼

• _deleteKey

  _deleteKey (result, data) {
  // 刪除已上傳分片
  return new Promise((resolve, reject) => {
     if (data.slices && data.slices.length) {
        if (data.slices.length !== this.allnum) {
          data.slices.forEach(ele => {
            delete result[ele]
            if (ele === data.slices[data.slices.length -1]) {
              resolve(1)
            }
          })
        } else {
          resolve(1)
        }
      } else {
        resolve(1)
      }
  })
  複製代碼

  }

• _forEachUp

  // 上傳
  async _forEachUp (result) {
   // 這裏僅是一個簡單的上傳示例
   // 實際業務需求可能涉及更多業務樣式等邏輯
  const keys = Object.keys(result) || []
  const lastKey = keys.length && keys[keys.length - 1]
  for (let i in result) {
    // param 上傳所需的參數
    // lastKey === i 是不是最後一個 若是是最後一個而且存在上傳失敗的分片 將觸發斷點上傳 而且當最後一個分片上傳完成以後 要有個變量數組暫存剩餘分片的數量
    // result和i的做用 當前分片上傳成功 delete result[i]
    await this.$fetch.demo('url', param, lastKey === i, result, i)
  }
  }
  複製代碼

小結

經過上述算是瞭解到一個比較經典的分片續傳流程，除了斷點、續傳、MD五、編碼等特性，就總體架構來講，視頻層，咱們看到整個流程是徹底脫離於用戶態的概念，即視頻獨立，這樣先後端服務會很是靈活，減小了和業務性耦合，而且還能有效避免同一個視頻被濫用的狀況，固然具體業務具體分析，並不是一家之言就能歸納，就和上方闡述的一些方式方法同樣，條條大路通羅馬，不限定路數，但每一條路都又有不同的體驗，歡迎你們在評論區，多多評論交流！