1. 程式人生 > 其它 >html5 大檔案分片上傳處理

html5 大檔案分片上傳處理

 檔案上傳是一個老生常談的話題了,在檔案相對比較小的情況下,可以直接把檔案轉化為位元組流上傳到伺服器,但在檔案比較大的情況下,用普通的方式進行上傳,這可不是一個好的辦法,畢竟很少有人會忍受,當檔案上傳到一半中斷後,繼續上傳卻只能重頭開始上傳,這種讓人不爽的體驗。那有沒有比較好的上傳體驗呢,答案有的,就是下邊要介紹的幾種上傳方式

1、秒傳

  • 什麼是秒傳?

通俗的說,你把要上傳的東西上傳,伺服器會先做MD5校驗,如果伺服器上有一樣的東西,它就直接給你個新地址,其實你下載的都是伺服器上的同一個檔案,想要不秒傳,其實只要讓MD5改變,就是對檔案本身做一下修改(改名字不行),例如一個文字檔案,你多加幾個字,MD5就變了,就不會秒傳了.

  • 本文實現的秒傳核心邏輯

a、利用redis的set方法存放檔案上傳狀態,其中key為檔案上傳的md5,value為是否上傳完成的標誌位,

b、當標誌位true為上傳已經完成,此時如果有相同檔案上傳,則進入秒傳邏輯。如果標誌位為false,則說明還沒上傳完成,此時需要在呼叫set的方法,儲存塊號檔案記錄的路徑,其中key為上傳檔案md5加一個固定字首,value為塊號檔案記錄路徑

2、分片上傳

  • 什麼是分片上傳?

分片上傳,就是將所要上傳的檔案,按照一定的大小,將整個檔案分隔成多個數據塊(我們稱之為Part)來進行分別上傳,上傳完之後再由服務端對所有上傳的檔案進行彙總整合成原始的檔案。

  • 分片上傳的場景

1.大檔案上傳

2.網路環境環境不好,存在需要重傳風險的場景

3、斷點續傳

  • 什麼是斷點續傳

斷點續傳是在下載或上傳時,將下載或上傳任務(一個檔案或一個壓縮包)人為的劃分為幾個部分,每一個部分採用一個執行緒進行上傳或下載,如果碰到網路故障,可以從已經上傳或下載的部分開始繼續上傳或者下載未完成的部分,而沒有必要從頭開始上傳或者下載。本文的斷點續傳主要是針對斷點上傳場景。

  • 應用場景

斷點續傳可以看成是分片上傳的一個衍生,因此可以使用分片上傳的場景,都可以使用斷點續傳。

  • 實現斷點續傳的核心邏輯

在分片上傳的過程中,如果因為系統崩潰或者網路中斷等異常因素導致上傳中斷,這時候客戶端需要記錄上傳的進度。在之後支援再次上傳時,可以繼續從上次上傳中斷的地方進行繼續上傳。

為了避免客戶端在上傳之後的進度資料被刪除而導致重新開始從頭上傳的問題,服務端也可以提供相應的介面便於客戶端對已經上傳的分片資料進行查詢,從而使客戶端知道已經上傳的分片資料,從而從下一個分片資料開始繼續上傳。

  • 實現流程步驟

a、方案一,常規步驟

  • 將需要上傳的檔案按照一定的分割規則,分割成相同大小的資料塊;

  • 初始化一個分片上傳任務,返回本次分片上傳唯一標識;

  • 按照一定的策略(序列或並行)傳送各個分片資料塊;

  • 傳送完成後,服務端根據判斷資料上傳是否完整,如果完整,則進行資料塊合成得到原始檔案。

b、方案二、本文實現的步驟

  • 前端(客戶端)需要根據固定大小對檔案進行分片,請求後端(服務端)時要帶上分片序號和大小

  • 服務端建立conf檔案用來記錄分塊位置,conf檔案長度為總分片數,每上傳一個分塊即向conf檔案中寫入一個127,那麼沒上傳的位置就是預設的0,已上傳的就是Byte.MAX_VALUE 127(這步是實現斷點續傳和秒傳的核心步驟)

  • 伺服器按照請求資料中給的分片序號和每片分塊大小(分片大小是固定且一樣的)算出開始位置,與讀取到的檔案片段資料,寫入檔案。

  • 分片上傳/斷點上傳程式碼實現

  1. 前端採用百度提供的webuploader的外掛,進行分片。因本文主要介紹服務端程式碼實現,webuploader如何進行分片,具體實現可以檢視如下連結:

    https://link.juejin.cn/?target=http%3A%2F%2Ffex.baidu.com%2Fwebuploader%2Fgetting-started.html

  2. 後端用兩種方式實現檔案寫入,一種是用RandomAccessFile,如果對RandomAccessFile不熟悉的朋友,可以檢視如下連結:

    https://link.juejin.cn/?target=https%3A%2F%2Fblog.csdn.net%2Fdimudan2015%2Farticle%2Fdetails%2F81910690

      另一種是使用MappedByteBuffer,對MappedByteBuffer不熟悉的朋友,可以檢視如下連結進行了解:

    https://link.juejin.cn/?target=https%3A%2F%2Fwww.jianshu.com%2Fp%2Ff90866dcbffc

檔案上傳是一個老生常談的話題了,在檔案相對比較小的情況下,可以直接把檔案轉化為位元組流上傳到伺服器,但在檔案比較大的情況下,用普通的方式進行上傳,這可不是一個好的辦法,畢竟很少有人會忍受,當檔案上傳到一半中斷後,繼續上傳卻只能重頭開始上傳,這種讓人不爽的體驗。那有沒有比較好的上傳體驗呢,答案有的,就是下邊要介紹的幾種上傳方式

1、秒傳

  • 什麼是秒傳?

通俗的說,你把要上傳的東西上傳,伺服器會先做MD5校驗,如果伺服器上有一樣的東西,它就直接給你個新地址,其實你下載的都是伺服器上的同一個檔案,想要不秒傳,其實只要讓MD5改變,就是對檔案本身做一下修改(改名字不行),例如一個文字檔案,你多加幾個字,MD5就變了,就不會秒傳了.

  • 本文實現的秒傳核心邏輯

a、利用redis的set方法存放檔案上傳狀態,其中key為檔案上傳的md5,value為是否上傳完成的標誌位,

b、當標誌位true為上傳已經完成,此時如果有相同檔案上傳,則進入秒傳邏輯。如果標誌位為false,則說明還沒上傳完成,此時需要在呼叫set的方法,儲存塊號檔案記錄的路徑,其中key為上傳檔案md5加一個固定字首,value為塊號檔案記錄路徑

2、分片上傳

  • 什麼是分片上傳?

分片上傳,就是將所要上傳的檔案,按照一定的大小,將整個檔案分隔成多個數據塊(我們稱之為Part)來進行分別上傳,上傳完之後再由服務端對所有上傳的檔案進行彙總整合成原始的檔案。

  • 分片上傳的場景

1.大檔案上傳

2.網路環境環境不好,存在需要重傳風險的場景

3、斷點續傳

  • 什麼是斷點續傳

斷點續傳是在下載或上傳時,將下載或上傳任務(一個檔案或一個壓縮包)人為的劃分為幾個部分,每一個部分採用一個執行緒進行上傳或下載,如果碰到網路故障,可以從已經上傳或下載的部分開始繼續上傳或者下載未完成的部分,而沒有必要從頭開始上傳或者下載。本文的斷點續傳主要是針對斷點上傳場景。

  • 應用場景

斷點續傳可以看成是分片上傳的一個衍生,因此可以使用分片上傳的場景,都可以使用斷點續傳。

  • 實現斷點續傳的核心邏輯

在分片上傳的過程中,如果因為系統崩潰或者網路中斷等異常因素導致上傳中斷,這時候客戶端需要記錄上傳的進度。在之後支援再次上傳時,可以繼續從上次上傳中斷的地方進行繼續上傳。

為了避免客戶端在上傳之後的進度資料被刪除而導致重新開始從頭上傳的問題,服務端也可以提供相應的介面便於客戶端對已經上傳的分片資料進行查詢,從而使客戶端知道已經上傳的分片資料,從而從下一個分片資料開始繼續上傳。

  • 實現流程步驟

a、方案一,常規步驟

  • 將需要上傳的檔案按照一定的分割規則,分割成相同大小的資料塊;

  • 初始化一個分片上傳任務,返回本次分片上傳唯一標識;

  • 按照一定的策略(序列或並行)傳送各個分片資料塊;

  • 傳送完成後,服務端根據判斷資料上傳是否完整,如果完整,則進行資料塊合成得到原始檔案。

b、方案二、本文實現的步驟

  • 前端(客戶端)需要根據固定大小對檔案進行分片,請求後端(服務端)時要帶上分片序號和大小

  • 服務端建立conf檔案用來記錄分塊位置,conf檔案長度為總分片數,每上傳一個分塊即向conf檔案中寫入一個127,那麼沒上傳的位置就是預設的0,已上傳的就是Byte.MAX_VALUE 127(這步是實現斷點續傳和秒傳的核心步驟)

  • 伺服器按照請求資料中給的分片序號和每片分塊大小(分片大小是固定且一樣的)算出開始位置,與讀取到的檔案片段資料,寫入檔案。

  • 分片上傳/斷點上傳程式碼實現

  1. 前端採用百度提供的webuploader的外掛,進行分片。因本文主要介紹服務端程式碼實現,webuploader如何進行分片,具體實現可以檢視如下連結:

    https://link.juejin.cn/?target=http%3A%2F%2Ffex.baidu.com%2Fwebuploader%2Fgetting-started.html

  2. 後端用兩種方式實現檔案寫入,一種是用RandomAccessFile,如果對RandomAccessFile不熟悉的朋友,可以檢視如下連結:

    https://link.juejin.cn/?target=https%3A%2F%2Fblog.csdn.net%2Fdimudan2015%2Farticle%2Fdetails%2F81910690

      另一種是使用MappedByteBuffer,對MappedByteBuffer不熟悉的朋友,可以檢視如下連結進行了解:

    https://link.juejin.cn/?target=https%3A%2F%2Fwww.jianshu.com%2Fp%2Ff90866dcbffc

    白皮書,  功能介紹,  功能對比,

    控制元件原始碼下載:

    asp.net原始碼下載jsp-springboot原始碼下載jsp-eclipse原始碼下載jsp-myeclipse原始碼下載php原始碼下載csharp-winform原始碼下載vue-cli原始碼下載c++原始碼下載

    測試與配置:

    asp.net-測試與配置jsp-eclipse-測試與配置jsp-springboot-測試與配置jsp-myeclipse-mysql-測試與配置php-測試與配置C#(WinFrom)測試與配置C++-WTL測試與配置

    最終效果展示:

    

NOSQL無需任何配置可直接訪問頁面進行測試

編輯

SQL

使用IIS

大檔案上傳測試推薦使用IIS以獲取更高效能。

編輯

使用IIS Express

小檔案上傳測試可以使用IIS Express

編輯

建立資料庫

編輯

配置資料庫連線資訊

編輯

訪問頁面進行測試

編輯