一、前言

說起上傳文件，基本上用了input框就可以解決。

直到這天，后端找到我說，這個100g的視頻，看看怎么樣才能上傳。

100g，我看了看飄紅的c盤（剩余空間7.86g），好家伙，我c盤都放不下100g，你現(xiàn)在要我通過網(wǎng)頁上傳。

沒法子，只好開干了。

二、整體思路

這么大文件，一次性上傳明顯不現(xiàn)實，因為每次一斷網(wǎng)，那就會從頭開始上傳，體驗感極差。所以切片勢在必行，關(guān)鍵就是如何切，怎么保障文件數(shù)據(jù)不會丟失，同時優(yōu)化上傳保障機(jī)制。

1、切片

不管是input還是el-upload組件，本質(zhì)上拿到的文件都是blob文件格式，blob文件自帶一個slice方法，可以用來分割切片。

//一個新的?[`Blob`]?對象，它包含了原始?[`Blob`]對象的某一個段的數(shù)據(jù)
// slice接受三個參數(shù)start、end、和contentType（可選）
// start和end的距離差就是切片的文件大小，以字節(jié)為單位
const chunk = file.slice(start, end);
const blob = new Blob([chunk], { type: file.type })

這里的blob就是每一個切片了，相當(dāng)于每一個個小文件。

2、計算切片唯一碼：md5或者h(yuǎn)ash值

js-md5  計算切片md5
spark-md5.min.js   計算hash值

如果不大的話，選用js-md5即可，如果文件巨大，那可能會引起阻塞，導(dǎo)致頁面假死，所以可以選用spark-md5.min.js，來計算hash值，它使用 web-worker 在 worker 線程計算 hash，這樣用戶仍可以在主界面正常的交互。根據(jù)實際情況選擇即可，但記得提前跟后端溝通。

具體計算方法網(wǎng)上很多，就不贅述了。

計算完后，將每一個切片和對應(yīng)的唯一碼關(guān)聯(lián)起來，待下一步使用。

3、切片上傳

按小文件的形式，普通地上傳每一片。

同時需要將切片數(shù)和第二點的唯一碼，也附上，給到后端進(jìn)行文件檢驗。

根據(jù)校驗成功與否，對應(yīng)返回唯一碼和狀態(tài)，前端標(biāo)記已完成和未完成的切片，

可以對失敗或者未完成的切片進(jìn)行重傳操作。

如果有并行上傳需求，那可以使用Promise.race()進(jìn)行并發(fā)請求，用Promise.all()來獲取最終完成情況。

但這也需要考慮并行數(shù)量對性能的影響。

4、上傳前檢測切片是否存在于后端

有時候因為網(wǎng)絡(luò)等問題，可能會導(dǎo)致上傳過程中途失敗等等原因，再次上傳就是重頭開始了。

這就會造成一種浪費吧，明明該切片在服務(wù)器上已經(jīng)有了，有覆蓋還行，沒有覆蓋的話，那對最終的合并肯定是會造成影響的。

所以在上傳前，可先提前發(fā)起請求，詢問切片是否存在。

存在則秒傳完成，不存在則繼續(xù)上傳，走第3點。

5、發(fā)送合并請求

在全部上傳完之后，同時全部都是成功的情況下，前端主動發(fā)送合并請求，攜帶未

切片前源文件的md5或者h(yuǎn)ash值，后端接到請求合并切片，在同路徑下，重現(xiàn)文件，并對比

md5碼或者h(yuǎn)ash值，一致則返回成功。

三、小結(jié)

本文基本上只是敘述了整體思路，思路理順了，剩下的只是在對應(yīng)的位置寫入具體的業(yè)務(wù)邏輯即可。

到此這篇關(guān)于vue實現(xiàn)大文件切片斷點續(xù)傳的文章就介紹到這了,更多相關(guān)vue大文件斷點續(xù)傳內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論