快捷導(dǎo)航

vue實(shí)現(xiàn)大文件切片斷點(diǎn)續(xù)傳

更新時(shí)間：2023年07月25日 09:06:21 作者：地霊殿__三無

上傳文件，基本上用了input框就可以解決，但大文件應(yīng)該怎樣上傳呢，一次性上傳明顯不現(xiàn)實(shí)，因?yàn)槊看我粩嗑W(wǎng)，那就會(huì)從頭開始上傳，所以切片勢在必行，關(guān)鍵就是如何切，怎么保障文件數(shù)據(jù)不會(huì)丟失，同時(shí)優(yōu)化上傳保障機(jī)制，本文就來給大家講講如何上傳大文件

一、前言

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

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

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

沒法子，只好開干了。

二、整體思路

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

1、切片

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

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

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

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

js-md5 計(jì)算切片md5
spark-md5.min.js 計(jì)算hash值

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

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

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

3、切片上傳

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

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

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

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

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

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

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

有時(shí)候因?yàn)榫W(wǎng)絡(luò)等問題，可能會(huì)導(dǎo)致上傳過程中途失敗等等原因，再次上傳就是重頭開始了。

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

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

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

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

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

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

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

三、小結(jié)

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

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

您可能感興趣的文章:

亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue實(shí)現(xiàn)大文件切片斷點(diǎn)續(xù)傳

目錄

一、前言

二、整體思路