搭建網(wǎng)站服務(wù)器平臺的三種方式,今天貴陽最新頭條新聞,廈門手機(jī)網(wǎng)站建設(shè)公司排名,wordpress演示站教程開發(fā)者日記#xff1a;大文件傳輸系統(tǒng)開發(fā)歷程 2023年11月15日 多云轉(zhuǎn)晴 今天接手了一個(gè)頗具挑戰(zhàn)性的外包項(xiàng)目 - 基于瀏覽器的超大文件傳輸系統(tǒng)?？蛻粢螽惓?yán)格#xff0c;必須支持20G文件的斷點(diǎn)續(xù)傳#xff0c;還要兼容IE8這種古董瀏覽器。作為一名在安徽…開發(fā)者日記大文件傳輸系統(tǒng)開發(fā)歷程2023年11月15日 多云轉(zhuǎn)晴今天接手了一個(gè)頗具挑戰(zhàn)性的外包項(xiàng)目 - 基于瀏覽器的超大文件傳輸系統(tǒng)?？蛻粢螽惓?yán)格必須支持20G文件的斷點(diǎn)續(xù)傳還要兼容IE8這種古董瀏覽器。作為一名在安徽獨(dú)立打拼的開發(fā)者這既是一次機(jī)會也是一次考驗(yàn)。技術(shù)方案分析經(jīng)過一整天的調(diào)研我確定了以下技術(shù)路線前端方案由于需要兼容IE8Vue3只能作為漸進(jìn)增強(qiáng)方案核心功能必須使用原生JS實(shí)現(xiàn)。文件夾結(jié)構(gòu)保留將通過webkitdirectory屬性配合自定義目錄結(jié)構(gòu)算法實(shí)現(xiàn)。加密方案采用國密SM4為主AES-256為輔的混合加密策略。SM4更適合國內(nèi)環(huán)境而AES則提供更廣泛的兼容性。斷點(diǎn)續(xù)傳需要在客戶端存儲分片信息使用IndexedDBlocalStorage的降級方案確保IE8也能工作。后端存儲阿里云OSS直接存儲加密后的文件數(shù)據(jù)庫只記錄元數(shù)據(jù)和分片信息。部分核心代碼實(shí)現(xiàn)前端文件選擇處理 (原生JS)// 文件選擇處理器 - 兼容IE8和其他現(xiàn)代瀏覽器functionhandleFileSelect(event){constfilesevent.target.files;constitemsevent.dataTransfer?event.dataTransfer.items:null;// 處理文件夾上傳if(itemsitems[0].webkitGetAsEntry){processDirectoryEntries(items);}else{// 普通文件處理processFiles(files);}}// 遞歸處理目錄結(jié)構(gòu)functionprocessDirectoryEntries(items){for(leti0;iitems.length;i){constentryitems[i].webkitGetAsEntry();if(entry.isFile){entry.file(file{file.fullPathentry.fullPath||file.name;addFileToQueue(file);});}elseif(entry.isDirectory){constdirReaderentry.createReader();dirReader.readEntries(entries{processDirectoryEntries(entries);});}}}后端分片上傳接口 (ASP.NET Core)[ApiController][Route(api/upload)]publicclassUploadController:ControllerBase{privatereadonlyIUploadService_uploadService;publicUploadController(IUploadServiceuploadService){_uploadServiceuploadService;}[HttpPost(chunk)]publicasyncTaskUploadChunk([FromForm]ChunkUploadRequestrequest){try{varresultawait_uploadService.ProcessChunkAsync(request);returnOk(result);}catch(Exceptionex){returnStatusCode(500,new{errorex.Message});}}}publicclassChunkUploadRequest{publicstringFileId{get;set;}publicintChunkNumber{get;set;}publicintTotalChunks{get;set;}publicstringFileName{get;set;}publicstringRelativePath{get;set;}// 保留文件夾結(jié)構(gòu)publicIFormFileFile{get;set;}publicstringHash{get;set;}}加密工具類 (SM4實(shí)現(xiàn))publicstaticclassSM4Util{privatestaticreadonlyEncodingEncodingEncoding.UTF8;publicstaticstringEncrypt(stringplainText,stringkey){varsm4newSM4();varencryptedsm4.EncryptECB(Encoding.GetBytes(plainText),Encoding.GetBytes(key));returnConvert.ToBase64String(encrypted);}publicstaticstringDecrypt(stringcipherText,stringkey){varsm4newSM4();vardecryptedsm4.DecryptECB(Convert.FromBase64String(cipherText),Encoding.GetBytes(key));returnEncoding.GetString(decrypted);}}IE8兼容方案這可能是最具挑戰(zhàn)的部分。我需要實(shí)現(xiàn)一個(gè)降級方案Flash/ActiveX備用方案當(dāng)檢測到IE8時(shí)加載備用上傳器分片上傳即使使用Flash也要支持進(jìn)度存儲使用cookie和userData行為存儲進(jìn)度// 檢測IE8并加載備用上傳器if(document.documentModedocument.documentMode8){loadLegacyUploader();}functionloadLegacyUploader(){// 使用Flash或Silverlight實(shí)現(xiàn)上傳功能varswfUrl/Content/Uploader.swf;swfobject.embedSWF(swfUrl,uploadContainer,100%,400,10.0.0);}明日計(jì)劃完成文件夾結(jié)構(gòu)遞歸算法的測試實(shí)現(xiàn)IE8下的分片上傳功能編寫SQL Server存儲過程優(yōu)化大容量數(shù)據(jù)存儲這個(gè)項(xiàng)目雖然挑戰(zhàn)巨大但恰好能檢驗(yàn)我多年的全棧開發(fā)經(jīng)驗(yàn)。如果能順利完成不僅能幫助客戶解決實(shí)際問題也能為我的技術(shù)履歷添上濃墨重彩的一筆。設(shè)置框架目標(biāo)框架選擇 .NET 8.0IDE使用Visual Studio 2022編譯項(xiàng)目修改測試端口修改項(xiàng)目測試端口根據(jù)客戶服務(wù)器環(huán)境修改。不一定是示例中的端口。訪問測試頁面測試一下配置是否正確。NOSQLNOSQL無需任何配置可直接訪問頁面進(jìn)行測試創(chuàng)建數(shù)據(jù)庫連接數(shù)據(jù)庫數(shù)據(jù)表檢查創(chuàng)建的數(shù)據(jù)表數(shù)據(jù)表創(chuàng)建成功后可以在數(shù)據(jù)庫下面的表節(jié)點(diǎn)中看到查詢數(shù)據(jù)配置數(shù)據(jù)庫連接信息檢查數(shù)據(jù)庫配置訪問頁面進(jìn)行測試效果預(yù)覽文件上傳文件刷新續(xù)傳支持離線保存文件進(jìn)度在關(guān)閉瀏覽器刷新瀏覽器后進(jìn)行不丟失仍然能夠繼續(xù)上傳文件夾上傳支持上傳文件夾并保留層級結(jié)構(gòu)同樣支持進(jìn)度信息離線保存刷新頁面關(guān)閉頁面重啟系統(tǒng)不丟失上傳進(jìn)度。下載完整示例已經(jīng)上傳到gitee了可以直接下載下載完整示例