html5解決大檔案斷點續傳

2021-07-22 05:43:44 字數 2182 閱讀 2240

1.為什麼要採用分塊上傳?

試想一下,如果上傳的檔案是乙個大檔案,本來上傳時間就相對較久,再加上網路不穩定各種因素影響,容易導致傳輸中斷,使用者除了重傳整個檔案外沒有更好的選擇。採用分片上傳可以很好地解決這個問題。

2.什麼是分片上傳?

分塊上傳,就是把乙個大的檔案分成若干塊,一塊一塊的傳輸。如上面的case, 如果傳輸中斷,僅需重傳出錯的分片,而不需要重傳整個檔案,大大減少了重傳開銷。

3.那麼,採用分塊上傳還有哪些優勢?

3.1更強容錯能力

如以上的case, 出錯重傳,僅需重傳一小塊。

3.2可以模擬暫停與繼續

對於乙個http請求,其實並沒有暫停功能,要不就是已完成,要不就是已中斷。如果不分塊,是沒法做暫停功能。但是如果採用分塊上傳,在某個分塊上傳完了後不自動開始下個分塊上傳,是不是就實現了暫停功能?

利用此功能,就可以通過網路檢測,在網路斷開的時候自動暫停傳輸,網路恢復後,繼續傳輸,給使用者帶來更好的體驗效果。

3.3利用併發提速

如果單獨的上傳乙個大檔案,只有採用了分塊上傳才能利用併發請求來提速。

3.4更精準的速度跟蹤

關於客戶端監控上傳進度,其實監控的都是客戶端的傳送速度,服務端有沒有接收,有沒有儲存,是不知道的,只有在整個請求完畢,收到服務端反饋後才能確定資料已經成功接收。這樣也就解釋了進度顯示的時候,長長出現,進度條瞬間到100%,要過一段時間才全部完成。如果採用分塊上傳,每個分塊上傳完成,可以確定這個分塊服務端已經成功接收。

4.當然,分塊也會有一定的***,本來是乙個請求,分塊後變成了多個請求,自然會帶來網路開銷。那麼具體是個什麼的情況呢?

可以看出來,分塊越小,時間消耗越大,尤其是分塊大小小到256k的時候,時間花費增長特別明顯。

5.那麼,如何選擇乙個合適的分塊大小?

主要有三個方面的考慮。

分塊越小,請求越多,開銷越大。所以不能設定得太小。

分塊越大,靈活度越小,前面所說的那些優勢就會相對越不明顯。故不能太小。

服務端一般都會有個固定大小的接受buffer(clientbodybuffer_size), 分塊的大小最好是這個值的整數倍。

綜合這些考慮,推薦的分塊大小是2m-5m,具體size根據產品中檔案上傳的大小分布來定。如果上傳的檔案大部分是500m以上,很大的檔案,建議是5m, 如果相對較小,推薦2m。

6.檔案續傳原理

目前比較常用的斷點續傳的方法有兩種,一種是通過websocket介面進行檔案上傳,另一種是通過ajax,兩種方法各有千秋,雖然websocket聽起來比較高階些~ 但是除了用了不同的協議外其他的演算法基本上都是很相似的,並且服務端要開啟ws介面,這裡用相對方便的ajax來說明斷點上傳的思路。

說來說去,斷點續傳最核心的內容就是把檔案「切片」然後再一片一片的傳給伺服器,但是這看似簡單的上傳過程卻有著無數的坑。

首先是檔案的識別,乙個檔案被分成了若干份之後如何告訴伺服器你切了多少塊,以及最終伺服器應該如何把你上傳上去的檔案進行合併,這都是要考慮的。

因此在檔案開始上傳之前,我們和伺服器要有乙個「握手」的過程,告訴伺服器檔案資訊,然後和伺服器約定切片的大小,當和伺服器達成共識之後就可以開始後續的檔案傳輸了。

前台要把每一塊的檔案傳給後台,成功之後前端和後端都要標識一下,以便後續的斷點。

當檔案傳輸中斷之後使用者再次選擇檔案就可以通過標識來判斷檔案是否已經上傳了一部分,如果是的話,那麼我們可以接著上次的進度繼續傳檔案,以達到續傳的功能。

js**

將拖拽到此

0%

上傳

php**

<?php  

//$name=$_post['username'];

$dir=$_post['filename'];

$dir="uploads/".md5($dir);

file_exists($dir) or mkdir($dir,0777,true);

$path=$dir."/".$_post['blobname'];

//print_r($_files["file"]);

move_uploaded_file($_files["file"]["tmp_name"],$path);

if(isset($_post['lastone']))

fclose($fp);

} ?>

Html5大檔案斷點續傳

大檔案分塊 一般常用的web伺服器都有對向伺服器端提交資料有大小限制。超過一定大小檔案伺服器端將返回拒絕資訊。當然,web伺服器都提供了配置檔案可能修改限制的大小。針對iis實現大檔案的上傳網上也有一些通過修改web伺服器限制檔案大小來實現。不過這樣對web伺服器的安全帶了問題。攻擊者很容易發乙個大...

大檔案斷點續傳

win10 node v8.2.1 npm v5.3.0 multer v1.3.0 使用1.由於對multer v1.3.0做了修改,所以不可以通過npm install multer這種形式,需要使用到修改過multer包去覆蓋原來的。2.對於檔案上傳的介面,比如 upload,需要攜帶引數ta...

python實現大檔案切片斷點續傳

server 能夠處理前端請求的路由 pick 是觸發檔案上傳功能的前端元素id var task id webuploader.base.guid 產生檔案唯一識別符號task id var uploader webuploader.create 上傳分片位址 pick picker auto f...