總所周知，上傳大文件時由于各種原因突然中斷，然后整個文件需要從頭開始上傳，這種情況非常令人抓狂??，那么怎樣才可以避免這種尷尬的情況呢？分片上傳或許可以搞定這個痛點

原理：文件上傳就是把文件切割成一個個小小的塊，然后塊逐一上傳

后臺約定接口：

1.getRestChunkInfo 獲取當前文件的上傳情況

輸入：{fileName, fileSize, md5, token}

輸出：{chunk_list, chunk_size, chunk_count}

chunk_list是一個數組，未上傳塊的編號等信息，

chunk_size:分片的大小，

chunk_count:分片的總次數，

2.uploadAPI

輸入：FormData對象,塊的具體信息

{file_name, file_size, file_md5, token}

輸出：一個對象，包含true/false

步驟：

1.獲取需要上傳的文件，用md5算法做消息摘要，就是md5碼作為文件的唯一標識

2.將md5碼、文件名、文件大小、token值作為輸入參數傳給后臺第一個API

3.接口返回chunk_list等參數，用chunk_list.shift取分片繼續(xù)調用第二個接口，一片一片上傳文件塊

4.所有文件上傳完成后，為了防止中間有出錯的分片，在次請求第一個接口，如果chunk_list的length為0，則說明所有分片上傳成功

完成上面的步驟后，后臺在確認所有的分片上傳完成后，就可以進行文件合并了。

圖解：

其中token值不是必傳參數，僅僅是系統(tǒng)為了防止CSRF攻擊，出于安全考慮的。Note：安全考慮還有加簽驗簽功能

難點：

1.如何切片，使用Blob對象的slice方法  blob.slice(startByte,endByte);

2.當前文件已上傳的片數，然后保證我從哪一片開始上傳

以上就是本次介紹的關于javascript之分片上傳，斷點續(xù)傳的實際項目實現的全部知識點內容，有需要的朋友們可以學習下。

最新評論