javascript之分片上傳,斷點(diǎn)續(xù)傳的實(shí)際項(xiàng)目實(shí)現(xiàn)詳解
總所周知,上傳大文件時(shí)由于各種原因突然中斷,然后整個(gè)文件需要從頭開始上傳,這種情況非常令人抓狂??,那么怎樣才可以避免這種尷尬的情況呢?分片上傳或許可以搞定這個(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ù),然后保證我從哪一片開始上傳
以上就是本次介紹的關(guān)于javascript之分片上傳,斷點(diǎn)續(xù)傳的實(shí)際項(xiàng)目實(shí)現(xiàn)的全部知識(shí)點(diǎn)內(nèi)容,有需要的朋友們可以學(xué)習(xí)下。
相關(guān)文章
當(dāng)鼠標(biāo)滑過(guò)文本框自動(dòng)選中輸入框內(nèi)容的JS代碼分享
這篇文章主要介紹了當(dāng)鼠標(biāo)滑過(guò)文本框自動(dòng)選中輸入框內(nèi)容的JS代碼,有需要的朋友可以參考一下2013-11-11JavaScript實(shí)現(xiàn)表單驗(yàn)證案例
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)表單驗(yàn)證案例,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-08-08js獲取dom的高度和寬度(可見(jiàn)區(qū)域及部分等等)
網(wǎng)頁(yè)可見(jiàn)區(qū)域?qū)捇蚋摺⒕W(wǎng)頁(yè)正文全文寬或高以及網(wǎng)頁(yè)正文部分左或右,詳細(xì)請(qǐng)看下文,希望對(duì)大家有所幫助2013-06-06JavaScript 實(shí)現(xiàn) Tab 點(diǎn)擊切換實(shí)例代碼
Tab 選項(xiàng)卡切換效果在現(xiàn)如今的網(wǎng)頁(yè)中,運(yùn)用的也是比較多的,包括點(diǎn)擊切換、滑動(dòng)切換、延遲切換、自動(dòng)切換等多種效果,在這篇博文里,我們是通過(guò)原生 JavaScript 來(lái)實(shí)現(xiàn) Tab 點(diǎn)擊切換的效果。2017-03-03js字符串轉(zhuǎn)換成數(shù)字與數(shù)字轉(zhuǎn)換成字符串的實(shí)現(xiàn)方法
本篇文章主要是對(duì)js字符串轉(zhuǎn)換成數(shù)字與數(shù)字轉(zhuǎn)換成字符串的實(shí)現(xiàn)方法進(jìn)行了詳細(xì)的介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-01-01js HTML5 Ajax實(shí)現(xiàn)文件上傳進(jìn)度條功能
這篇文章主要介紹了javascript實(shí)現(xiàn)文件上傳進(jìn)度條功能的相關(guān)資料啊,感興趣的朋友可以參考一下2016-02-02Layui 帶多選框表格監(jiān)聽(tīng)事件以及按鈕自動(dòng)點(diǎn)擊寫法實(shí)例
今天小編就為大家分享一篇Layui 帶多選框表格監(jiān)聽(tīng)事件以及按鈕自動(dòng)點(diǎn)擊寫法實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09