Node+H5實現大文件分片上傳(有源碼)

話前

上傳大文件上傳的教程網上不少, 可是大部分沒給出一個比較完整的出來, 這個博客給出的是先後端一套完整的解決方案, 其中前端沒有使用第三方上傳庫, 但願能幫到有一樣需求的朋友們.

大文件分片上傳的好處在這裏就不用多說了, 以前不論是上傳單文件仍是分片文件上傳都是依靠Flash來實現, 如今H5能原生支持, 並且性能要比Flash高不少, 因此正好公司的一個需求就是要分片上傳, 藉機分享給你們

分片上傳的思路以下:

• 第一步:先對文件進行MD5的加密, 這樣有兩個好處, 便可以對文件進行惟一的標識, 爲秒傳作準備, 也能夠爲後臺進行文件完整性的校驗進行比對

• 第二步:拿到MD5值之後, 要查詢一下, 這個文件是否已經上傳過了, 若是上傳過了, 就不用再次重複上傳, 也就是可以秒傳, 網盤裏的秒傳, 原理也是同樣的

• 第三步:對文件進行切片, 假如文件是500M, 一個切片大小咱們定義爲50M, 那麼整個文件就爲分爲100次上傳

• 第四步:向後臺請求一個接口, 接口裏面的數據是該文件已經上傳過的文件塊, 爲何要有這個請求呢? 咱們常常用網盤, 網盤裏面有續傳的功能, 一個文件傳到一半, 因爲各類緣由, 不想再傳了, 那麼再次上傳的時候, 服務器應該保留我以前上傳過的文件塊, 跳過這些已經上傳過的塊, 再次上傳其餘文件塊, 固然續傳方案有不少, 目前來看, 單獨發一次請求, 這樣效率最高

• 第五步:開始對未上傳過的塊進行POST上傳

• 第六步:當上傳成功後, 通知服務器進行文件的合併, 至此, 上傳完成!

爲了直觀起見, 我畫了一個流程圖

最終前端的效果圖

後端的最終文件目錄結構

下面咱們說下主要的代碼

• GIF圖裏的校驗文件就是對文件進行MD5+拿這個MD5值, 看下文件是否已經上傳

• • 對文件的MD5小文件還好, 大文件的話會比較慢, 經我測試, 4G的文件, MD5的時間大約在2分鐘

  • 對文件進行MD5, 咱們使用的是spark-md5, 由於這步是瀏覽器來作, 因此須要引入這個js

  • 由於MD5的大文件時間比較長, 因此要和GIF圖同樣, 作成帶進度的, 這樣就須要把文件進行分片的MD5, spark也支持這種方式, 最終的MD5值爲spark.end()

  • 和服務器校驗文件的ajax請求, 須要傳遞文件名稱和文件的MD5值

• Node端會處理兩件事件, 1.看文件是否存在 2.文件不存在, 返回已上傳文件塊的list, 文件沒上傳過, 則list爲空

• 下面咱們會對文件進行切片處理(File的API提供slice操做), 序號0-n, (服務器存儲的文件形式也是MD5做爲文件夾名, 0-n爲文件名, 如上面那張服務器結果所示), 而後循環每一個分片, 和上面的服務器返回的List作比對, 未在List上的文件進行上傳

• 前端代碼:
  

• node端代碼
  

• 最後一步, 當全部文件都上傳完成, 告知Node端合併文件

• 前端代碼
  

• Node端代碼
  

最後上源碼: 點擊跳轉GitHUb