javascript之分片上傳，斷點(diǎn)續(xù)傳的實(shí)際項(xiàng)目的示例分析

小編給大家分享一下javascript之分片上傳，斷點(diǎn)續(xù)傳的實(shí)際項(xiàng)目的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

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

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

后臺(tái)約定接口：

1.getRestChunkInfo 獲取當(dāng)前文件的上傳情況

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

輸出：{chunk_list, chunk_size, chunk_count}

chunk_list是一個(gè)數(shù)組，未上傳塊的編號(hào)等信息，

chunk_size:分片的大小，

chunk_count:分片的總次數(shù)，

2.uploadAPI

輸入：FormData對(duì)象,塊的具體信息

{file_name, file_size, file_md5, token}

輸出：一個(gè)對(duì)象，包含true/false

步驟：

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

2.將md5碼、文件名、文件大小、token值作為輸入?yún)?shù)傳給后臺(tái)第一個(gè)API

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

4.所有文件上傳完成后，為了防止中間有出錯(cuò)的分片，在次請(qǐng)求第一個(gè)接口，如果chunk_list的length為0，則說(shuō)明所有分片上傳成功

完成上面的步驟后，后臺(tái)在確認(rèn)所有的分片上傳完成后，就可以進(jìn)行文件合并了。

圖解：

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

難點(diǎn)：

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

2.當(dāng)前文件已上傳的片數(shù)，然后保證我從哪一片開(kāi)始上傳

以上是“javascript之分片上傳，斷點(diǎn)續(xù)傳的實(shí)際項(xiàng)目的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！