JS前端分片上傳大文件步驟(支持1G以上的超大文件)
什么時(shí)候需要分片上傳?
如果將大文件一次性上傳,耗時(shí)會(huì)非常長(zhǎng),甚至可能傳輸失敗,那么我們?cè)趺唇鉀Q這個(gè)問題呢?既然大文件上傳不適合一次性上傳,那么我們可以嘗試將文件分片散上傳。
這樣的技術(shù)就叫做分片上傳。分片上傳就是將大文件分成一個(gè)個(gè)小文件(切片),將切片進(jìn)行上傳,等到后端接收到所有切片,再將切片合并成大文件。通過將大文件拆分成多個(gè)小文件進(jìn)行上傳,確實(shí)就是解決了大文件上傳的問題。因?yàn)檎?qǐng)求時(shí)可以并發(fā)執(zhí)行的,這樣的話每個(gè)請(qǐng)求時(shí)間就會(huì)縮短,如果某個(gè)請(qǐng)求發(fā)送失敗,也不需要全部重新發(fā)送。
分片上傳流程
獲取文件專屬M(fèi)D5碼
import sparkMD5 from 'spark-md5' // 安裝下spark-md5包
// 定義hash函數(shù),接受一個(gè)名為chunks的數(shù)組作為參數(shù) hash = (chunks) => { // 返回一個(gè)Promise,這樣調(diào)用者可以使用.then()或async/await來處理結(jié)果 return new Promise((resolve) => { // 創(chuàng)建一個(gè)新的sparkMD5實(shí)例,用于計(jì)算MD5哈希值 const spark = new sparkMD5(); // 定義一個(gè)遞歸函數(shù)_read,用于逐個(gè)處理chunks數(shù)組中的blob function _read(i) { // 如果索引i大于等于chunks數(shù)組的長(zhǎng)度,說明所有blob都已經(jīng)處理完畢 if (i >= chunks.length) { // 調(diào)用sparkMD5實(shí)例的end方法,并傳入resolve回調(diào),以返回最終的哈希值 resolve(spark.end()); return; // 讀取完成,退出函數(shù) } // 獲取當(dāng)前索引i對(duì)應(yīng)的blob const blob = chunks[i]; // 創(chuàng)建一個(gè)新的FileReader實(shí)例,用于讀取blob的內(nèi)容 const reader = new FileReader(); // 設(shè)置FileReader的onload事件處理函數(shù),當(dāng)blob內(nèi)容讀取完成后調(diào)用 reader.onload = e => { // 從事件對(duì)象e中獲取讀取到的字節(jié)數(shù)組 const bytes = e.target.result; // 將字節(jié)數(shù)組添加到sparkMD5實(shí)例中,用于計(jì)算哈希值 spark.append(bytes); // 遞歸調(diào)用_read函數(shù),處理下一個(gè)blob _read(i + 1); }; // 以ArrayBuffer格式異步讀取當(dāng)前blob的內(nèi)容 reader.readAsArrayBuffer(blob); // 這里是讀取操作開始的地方 } // 從索引0開始,調(diào)用_read函數(shù),處理chunks數(shù)組中的第一個(gè)blob _read(0); }); };
解析:
在這個(gè)函數(shù)中,_read 函數(shù)是一個(gè)遞歸函數(shù),它會(huì)逐個(gè)處理 chunks 數(shù)組中的每個(gè) blob。對(duì)于每個(gè) blob,它使用 FileReader 的 readAsArrayBuffer 方法異步讀取內(nèi)容,并在內(nèi)容讀取完成后通過 onload 事件處理函數(shù)將讀取到的字節(jié)數(shù)組添加到 sparkMD5 實(shí)例中。當(dāng)所有 blob 都處理完畢后,sparkMD5 實(shí)例的 end 方法被調(diào)用,并返回最終的哈希值,這個(gè)值隨后通過Promise的 resolve 方法傳遞給調(diào)用者。
在這個(gè)函數(shù)中,當(dāng)用戶選擇一個(gè)文件后,readAsArrayBuffer開始異步讀取文件內(nèi)容。一旦文件內(nèi)容被讀取并轉(zhuǎn)換為ArrayBuffer,onload事件處理程序就會(huì)被調(diào)用,你可以在這個(gè)事件處理程序中訪問到ArrayBuffer對(duì)象,并對(duì)其進(jìn)行處理。ArrayBuffer對(duì)象代表原始的二進(jìn)制數(shù)據(jù)
接口1:傳MD5碼獲取該文件已上傳的片數(shù)
調(diào)用上面的方法hash()
const md5Str = await this.hash(chunksList); /* 這里寫發(fā)送md5Str【接口1】 的方法,獲取已上傳片數(shù) */
接口2:將文件分片成promise請(qǐng)求數(shù)組
1.文件分片
chunkFile = (file, chunksize) => { const chunks = Math.ceil(file.size / chunksize); const chunksList = []; let currentChunk = 0; while (currentChunk < chunks) { const start = currentChunk * chunksize; const end = Math.min(file.size, start + chunksize); const chunk = file.slice(start, end); chunksList.push(chunk); currentChunk++; } return chunksList; };
2.封裝成promise請(qǐng)求
chunkPromise = data => { //每個(gè)分片的請(qǐng)求 return new Promise((resolve, reject) => { /* 這里寫上傳的 【接口2】,傳data過去*/ }).catch(err => { message.error(err.msg); reject(); }) } const promiseList = [] const chunkList = chunkFile(file, size) chunkList.map(item => { const formData = new FormData(); formData.append('file', item) // limit是線程池組件 后面會(huì)寫 promiseList.push(limit(() => this.chunkPromise(formData, chunks))) })
promise請(qǐng)求數(shù)組做線程池限制處理 p-limit
p-limit npm 包是一個(gè)實(shí)用工具,它允許你限制同時(shí)運(yùn)行的 Promise 數(shù)量。當(dāng)你擁有可以在并行中運(yùn)行的操作,但由于資源限制想要限制這些操作的數(shù)量時(shí),這個(gè)工具就很有用,有助于控制并發(fā)性。
p-limit npm地址官方案例:
const pLimit = require('p-limit'); const limit = pLimit(2); const input = [ limit(() => fetchSomething('foo')), limit(() => fetchSomething('bar')), limit(() => doSomethingElse()), ]; // Only two promises will run at once, the rest will be queued Promise.all(input).then(results => { console.log(results); });
接口3:promise.all執(zhí)行結(jié)束后,請(qǐng)求一個(gè)是否合并成功的接口
Promise.all(promiseList).then(res =>{ // 這里寫接口3 問后端是否合并成功了 }).catch(err => { message.error(err.msg); })
完整主函數(shù)
分片大小建議不超過最大不超過5M
const md5Str = await this.hash(chunksList); /* 這里寫發(fā)送md5Str【接口1】 的方法,獲取已上傳片數(shù) */ const promiseList = [] const chunkList = this.chunkFile(file, size) chunkList.map(item => { const formData = new FormData(); formData.append('file', item) promiseList.push(limit(() => this.chunkPromise(formData, chunks))) // 【接口2 在this.chunkPromise里】 } Promise.all(promiseList).then(res =>{ // 這里寫【接口3】 問后端是否合并成功了 }).catch(err => { message.error(err.msg); })
待優(yōu)化的地方: 使用Web Workers進(jìn)行分片上傳
Web Workers在后臺(tái)線程中運(yùn)行,它們不會(huì)阻塞主線程,這意味著主線程可以繼續(xù)響應(yīng)用戶的操作,如界面渲染和交互。在分片上傳過程中,每個(gè)文件塊可以在單獨(dú)的Worker中處理,從而實(shí)現(xiàn)并行處理,大大提高了上傳速度。同時(shí),由于Worker不會(huì)與主線程共享內(nèi)存,因此可以避免內(nèi)存競(jìng)爭(zhēng)和阻塞,進(jìn)一步提升了性能。
總結(jié)
到此這篇關(guān)于JS前端分片上傳大文件的文章就介紹到這了,更多相關(guān)JS前端分片上傳大文件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
在Postman的腳本中如何使用pm對(duì)象獲取接口的請(qǐng)求參數(shù)
這篇文章主要介紹了在Postman的腳本中如何使用pm對(duì)象獲取接口的請(qǐng)求參數(shù),本文通過實(shí)例代碼圖文相結(jié)合給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09微信小程序與后臺(tái)PHP交互的方法實(shí)例分析
這篇文章主要介紹了微信小程序與后臺(tái)PHP交互的方法,結(jié)合實(shí)例形式分析了微信小程序基于wx.request(OBJECT)方法與后臺(tái)php程序交互相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2018-12-12詳解JavaScript的懶加載是如何實(shí)現(xiàn)的
懶加載(Lazy Loading)是一種在軟件開發(fā)中常用的優(yōu)化技術(shù),它主要用于延遲加載資源,直到真正需要使用的時(shí)候才進(jìn)行加載,這樣可以減少初始加載的時(shí)間和資源消耗,并提升用戶體驗(yàn),本文給大家詳細(xì)介紹了JavaScript的懶加載是如何實(shí)現(xiàn)的,需要的朋友可以參考下2024-01-01js原生實(shí)現(xiàn)FastClick事件的實(shí)例
下面小編就為大家?guī)硪黄猨s原生實(shí)現(xiàn)FastClick事件的實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11javascript contains和compareDocumentPosition 方法來確定是否HTML節(jié)點(diǎn)間的關(guān)
一個(gè)很棒的 blog 文章,是 PPK 兩年前寫的,文章中解釋了 contains() 和 compareDocumentPosition() 方法運(yùn)行在他們各自的瀏覽器上。2010-02-02基于JavaScript實(shí)現(xiàn)瀏覽器添加收藏功能
今天搞項(xiàng)目的時(shí)候?yàn)榱藢?shí)現(xiàn)瀏覽者實(shí)現(xiàn)添加收藏的功能,特地了解了一下相關(guān)的API,整理了一段代碼幫助大家實(shí)現(xiàn)瀏覽器添加收藏功能,感興趣的朋友跟隨小編一起看看吧2023-02-02使用js實(shí)現(xiàn)html標(biāo)簽、文本的隱藏、顯示、刪除及添加
在設(shè)計(jì)網(wǎng)頁時(shí),有時(shí)需要靜態(tài)或動(dòng)態(tài)地隱藏標(biāo)簽或顯示被隱藏的標(biāo)簽,那該怎么實(shí)現(xiàn)呢?這篇文章主要給大家介紹了關(guān)于使用js實(shí)現(xiàn)html標(biāo)簽、文本的隱藏、顯示、刪除及添加的相關(guān)資料,需要的朋友可以參考下2023-06-06js實(shí)現(xiàn)選項(xiàng)卡內(nèi)容切換以及折疊和展開效果【推薦】
本文主要介紹了js實(shí)現(xiàn)選項(xiàng)卡內(nèi)容切換以及文字折疊和展開效果的示例代碼。具有一定的參考價(jià)值,下面跟著小編一起來看下吧2017-01-01JavaScript實(shí)現(xiàn)Promise流程詳解
首先呢,Promise是異步中比較重要的知識(shí)點(diǎn),學(xué)習(xí)的最好方法就是掌握它的基本原理。所以這一篇主要說一下如何用JS來實(shí)現(xiàn)一個(gè)自己的promise2022-09-09微信小程序彈窗禁止頁面滾動(dòng)的實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序彈窗禁止頁面滾動(dòng)的實(shí)現(xiàn)代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-12-12