創(chuàng)新互聯(lián)www.cdcxhl.cn八線動態(tài)BGP香港云服務(wù)器提供商，新人活動買多久送多久，劃算不套路！

你所需要的網(wǎng)站建設(shè)服務(wù)，我們均能行業(yè)靠前的水平為你提供.標準是產(chǎn)品質(zhì)量的保證，主要從事成都網(wǎng)站設(shè)計、網(wǎng)站建設(shè)、企業(yè)網(wǎng)站建設(shè)、移動網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計、成都品牌網(wǎng)站建設(shè)、網(wǎng)頁制作、做網(wǎng)站、建網(wǎng)站。成都創(chuàng)新互聯(lián)擁有實力堅強的技術(shù)研發(fā)團隊及素養(yǎng)的視覺設(shè)計專才。

這篇文章將為大家詳細講解有關(guān)React+EggJs如何實現(xiàn)斷點續(xù)傳的，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

技術(shù)棧

前端用了React，后端則是EggJs，都用了TypeScript編寫。

斷點續(xù)傳實現(xiàn)原理

斷點續(xù)傳就是在上傳一個文件的時候可以暫停掉上傳中的文件，然后恢復(fù)上傳時不需要重新上傳整個文件。

該功能實現(xiàn)流程是先把上傳的文件進行切割，然后把切割之后的文件塊發(fā)送到服務(wù)端，發(fā)送完畢之后通知服務(wù)端組合文件塊。

其中暫停上傳功能就是前端取消掉文件塊的上傳請求，恢復(fù)上傳則是把未上傳的文件塊重新上傳。需要前后端配合完成。

前端實現(xiàn)

前端主要分為：切割文件、獲取文件MD5值、上傳切割后的文件塊、合并文件、暫停和恢復(fù)上傳等功能。

切割文件：這個功能點在整個斷點續(xù)傳中屬于比較重要的一環(huán)，這里仔細說明下。我們用ajax上傳一個大文件用的時間會比較長，在上傳途中如果取消掉請求，那在下一次上傳時又要重新上傳整個文件。而通過把大文件分解成若干個文件塊去上傳，這樣在上傳中取消請求，已經(jīng)上傳的文件塊會保存到服務(wù)端，下一次上傳就只需要上傳其他沒上傳成功的文件塊(不用傳整個文件)。

這里把文件塊放入一個fileChunkList數(shù)組，方便后面去獲取文件的MD5值、上傳文件塊等。

// 使用HTML5的file.slice對文件進行切割，file.slice方法返回Blob對象
let start = 0;
while (start < file.size) {
    fileChunkList.push({ file: file.slice(start, start + CHUNK_SIZE) });
    start += CHUNK_SIZE;
}

名稱欄目：React+EggJs如何實現(xiàn)斷點續(xù)傳的-創(chuàng)新互聯(lián)
分享鏈接：http://weahome.cn/article/djpcii.html