網(wǎng)站建設(shè)添加背景命令,wordpress設(shè)置付費(fèi)閱讀,網(wǎng)絡(luò)營銷推廣價(jià)格,做包裝設(shè)計(jì)的網(wǎng)站提示#xff1a;文章寫完后#xff0c;目錄可以自動生成#xff0c;如何生成可參考右邊的幫助文檔 文章目錄一、大文件上傳的核心問題二、解決方案#xff1a;分片上傳2.1 核心定義2.2 核心優(yōu)勢三、分片上傳核心原理3.1 整體流程3.2 關(guān)鍵#xff1a;文件讀取與分片3.2.1 讀…提示文章寫完后目錄可以自動生成如何生成可參考右邊的幫助文檔文章目錄一、大文件上傳的核心問題二、解決方案分片上傳2.1 核心定義2.2 核心優(yōu)勢三、分片上傳核心原理3.1 整體流程3.2 關(guān)鍵文件讀取與分片3.2.1 讀取本地文件3.2.2 文件分片實(shí)現(xiàn)3.2.3 分片特點(diǎn)四、核心文件唯一標(biāo)識Hash計(jì)算4.1 為什么需要Hash值4.2 Hash計(jì)算方案4.2.1 安裝依賴4.2.2 實(shí)現(xiàn)Hash計(jì)算4.2.3上傳分片4.3 秒傳功能原理五、斷點(diǎn)續(xù)傳核心邏輯六、總結(jié)一、大文件上傳的核心問題當(dāng)上傳視頻等大文件時(shí)直接單次上傳會面臨諸多問題這也是B站等平臺采用分片上傳的核心原因上傳耗時(shí)極長大文件數(shù)據(jù)量龐大單次請求傳輸鏈路長等待時(shí)間久失敗代價(jià)高網(wǎng)絡(luò)中斷、服務(wù)器異常等問題會導(dǎo)致上傳失敗需重新完整上傳服務(wù)端限制多數(shù)服務(wù)器會對單次上傳文件大小設(shè)限直接上傳易觸發(fā)限制用戶體驗(yàn)差無進(jìn)度反饋、失敗后重復(fù)操作嚴(yán)重影響使用感受。二、解決方案分片上傳2.1 核心定義將大文件切割為多個(gè)大小均等的數(shù)據(jù)小塊分片逐個(gè)或并行上傳至服務(wù)器全部分片上傳完成后由后端按順序組裝還原為完整文件的技術(shù)方案。2.2 核心優(yōu)勢降低失敗風(fēng)險(xiǎn)僅需重新上傳出錯(cuò)的分片無需重復(fù)傳輸完整文件提升上傳效率支持多分片并行上傳突破單文件傳輸瓶頸適配服務(wù)端限制單個(gè)分片大小可控避免觸發(fā)服務(wù)端文件大小限制支持?jǐn)帱c(diǎn)續(xù)傳結(jié)合狀態(tài)記錄可在網(wǎng)絡(luò)恢復(fù)后繼續(xù)上傳未完成部分。三、分片上傳核心原理3.1 整體流程前端讀取本地文件獲取File對象按固定大小切割File對象生成多個(gè)分片Blob類型計(jì)算文件唯一標(biāo)識hash值用于服務(wù)端識別文件逐個(gè)/并行上傳分片攜帶文件標(biāo)識、分片序號等信息服務(wù)端接收分片并存儲記錄分片順序與位置所有分片上傳完成后前端通知后端觸發(fā)文件組裝后端按分片順序拼接還原為完整文件。3.2 關(guān)鍵文件讀取與分片3.2.1 讀取本地文件通過監(jiān)聽input標(biāo)簽的change事件在回調(diào)中獲取用戶選擇的File對象FileList偽數(shù)組形式需通過下標(biāo)獲取單個(gè)文件。template!--文件選擇輸入框--input changehandleUploadtypefile//div/templatescript setup langts/** * 處理文件選擇事件 * param e 事件對象 */consthandleUpload(e:Event){// 類型斷言將事件目標(biāo)轉(zhuǎn)為HTMLInputElementconstinpute.targetasHTMLInputElement;// 獲取文件列表偽數(shù)組支持下標(biāo)訪問constfilesinput.files;if(!files||files.length0)return;// 獲取第一個(gè)選中的文件File對象繼承自Blobconstfilefiles[0];console.log(選中文件信息,{name:file.name,// 文件名size:file.size,// 文件大小字節(jié)type:file.type// 文件MIME類型});};/script3.2.2 文件分片實(shí)現(xiàn)核心依賴Blob.slice()方法File對象繼承自Blob可直接調(diào)用該方法切割文件。通過循環(huán)控制切割的起始與結(jié)束位置生成多個(gè)固定大小的分片。關(guān)鍵參數(shù)CHUNK_SIZE分片大小通常設(shè)為1-5MB此處以1MB為例// 分片大小1MB1024*1024字節(jié)constCHUNK_SIZE1024*1024;/** * 切割文件為多個(gè)分片 * param file 待分片的File對象 * returns 分片數(shù)組每一項(xiàng)為Blob類型 */constcreateChunks(file:File):Blob[]{constchunks:Blob[][];letcurrentPosition0;// 當(dāng)前切割位置// 循環(huán)切割直到覆蓋整個(gè)文件while(currentPositionfile.size){/** * slice(start, end)切割Blob * start起始字節(jié)位置 * end結(jié)束字節(jié)位置不包含 */constchunkfile.slice(currentPosition,currentPositionCHUNK_SIZE);chunks.push(chunk);// 更新下一次切割的起始位置currentPositionCHUNK_SIZE;}console.log(文件分片完成共${chunks.length}個(gè)分片);returnchunks;};// 調(diào)用示例在handleUpload中添加// const file files[0];// const chunks createChunks(file);3.2.3 分片特點(diǎn)分片過程幾乎瞬間完成原因是Blob/File對象僅存儲文件元信息名稱、大小等不存儲實(shí)際文件數(shù)據(jù)slice()方法僅生成新的元信息引用未復(fù)制數(shù)據(jù)。四、核心文件唯一標(biāo)識Hash計(jì)算4.1 為什么需要Hash值服務(wù)端需通過唯一標(biāo)識區(qū)分不同文件避免以下問題文件名重復(fù)不同文件可能重名相同文件可能改名實(shí)現(xiàn)秒傳相同內(nèi)容的文件僅需上傳一次斷點(diǎn)續(xù)傳通過Hash值匹配已上傳的分片。4.2 Hash計(jì)算方案采用spark-md5庫輕量、高效支持瀏覽器端基于文件內(nèi)容生成唯一MD5 Hash值。為優(yōu)化大文件計(jì)算效率采用「抽樣計(jì)算」策略第一個(gè)和最后一個(gè)分片完整參與計(jì)算中間分片僅抽取頭部2字節(jié)、中間2字節(jié)、尾部2字節(jié)參與計(jì)算兼顧唯一性與性能避免全量計(jì)算耗時(shí)過長。4.2.1 安裝依賴# npm安裝npminstallspark-md5 --save# yarn安裝yarnaddspark-md5# pnpm安裝pnpmaddspark-md54.2.2 實(shí)現(xiàn)Hash計(jì)算importSparkMD5fromspark-md5;/** * 計(jì)算文件的唯一Hash值基于內(nèi)容 * param chunks 文件分片數(shù)組 * returns 文件Hash值Promise */constcalculateFileHash(chunks:Blob[]):Promisestring{returnnewPromise((resolve,reject){constsparknewSparkMD5.ArrayBuffer();// 基于ArrayBuffer計(jì)算constfileReadernewFileReader();// 用于讀取分片數(shù)據(jù)constsampleChunks:Blob[][];// 用于抽樣的分片數(shù)據(jù)// 1. 抽樣策略選取部分?jǐn)?shù)據(jù)參與計(jì)算chunks.forEach((chunk,index){constisFirstChunkindex0;constisLastChunkindexchunks.length-1;if(isFirstChunk||isLastChunk){// 首/尾分片完整加入抽樣sampleChunks.push(chunk);}else{// 中間分片抽取頭部2B、中間2B、尾部2BsampleChunks.push(chunk.slice(0,2));sampleChunks.push(chunk.slice(CHUNK_SIZE/2,CHUNK_SIZE/22));sampleChunks.push(chunk.slice(CHUNK_SIZE-2,CHUNK_SIZE));}});// 2. 讀取抽樣數(shù)據(jù)fileReader.readAsArrayBuffer(newBlob(sampleChunks));// 3. 讀取完成后計(jì)算HashfileReader.onload(e){try{constarrayBuffere.target?.resultasArrayBuffer;spark.append(arrayBuffer);// 追加數(shù)據(jù)constfileHashspark.end();// 生成最終Hash值console.log(文件唯一Hash值,fileHash);resolve(fileHash);}catch(error){reject(Hash計(jì)算失敗error);}};// 4. 讀取失敗處理fileReader.onerror(error){reject(文件讀取失敗error);};});};// 調(diào)用示例在handleUpload中添加// const chunks createChunks(file);// const fileHash await calculateFileHash(chunks);4.2.3上傳分片constuploadChunksasync(chunks:Blob[]){constdatachunks.map((chunk,index){return{fileHash:fileHash.value,chunkHash:fileHash.value-index,chunk,};});constformDatasdata.map((item){constformDatanewFormData();formData.append(fileHash,item.fileHash);formData.append(chunkHash,item.chunkHash);formData.append(chunk,item.chunk);returnformData;});// console.log(formDatas)constmax6;letindex0;consttaskPool:any[];//請求池while(indexformDatas.length){consttaskfetch(/upload,{method:POST,body:formDatas[index],});taskPool.splice(taskPool.findIndex((item:any)itemtask))taskPool.push(task)if(taskPool.lengthmax){awaitPromise.race(taskPool);//taskPool里如果有一個(gè)已完成那么這個(gè)Promise狀態(tài)就會標(biāo)志城已完成}index;}awaitPromise.all(taskPool);//方志友請求未完成};4.3 秒傳功能原理用戶上傳文件前前端先計(jì)算文件Hash值并傳給服務(wù)端服務(wù)端查詢該Hash值是否已存在對應(yīng)已上傳的完整文件若存在直接返回“上傳成功”無需傳輸文件秒傳效果若不存在正常執(zhí)行分片上傳流程。五、斷點(diǎn)續(xù)傳核心邏輯基于文件Hash值實(shí)現(xiàn)核心是“上傳前校驗(yàn)已傳分片”前端計(jì)算文件Hash后向服務(wù)端發(fā)起“查詢已傳分片”請求服務(wù)端返回該文件已上傳的分片序號列表如[0,1,2,5]前端過濾掉已上傳的分片僅上傳未完成的分片所有分片上傳完成后請求服務(wù)端組裝文件。六、總結(jié)前端核心職責(zé)文件讀取 → 分片切割 → Hash計(jì)算 → 分片上傳 → 觸發(fā)組裝后端核心職責(zé)接收分片 → 存儲分片 → 校驗(yàn)已傳分片 → 組裝完整文件關(guān)鍵技術(shù)Blob.slice()分片、spark-md5 Hash計(jì)算、FormData傳輸分片