網(wǎng)站設(shè)計培訓(xùn),單頁網(wǎng)站定義,怎么刪除網(wǎng)站死鏈,asp.net網(wǎng)站開發(fā)項...文件管理系統(tǒng)畢業(yè)設(shè)計#xff1a;從零到崩潰的全過程 1. 我的畢業(yè)設(shè)計困境 臥槽#xff0c;這畢業(yè)設(shè)計是要我命啊#xff01;當(dāng)我看到老師給出的文件管理系統(tǒng)需求時#xff0c;差點把剛買的珍珠奶茶噴出來。 10G大文件上傳#xff1f;斷點續(xù)傳#xff1f;…文件管理系統(tǒng)畢業(yè)設(shè)計從零到崩潰的全過程1. 我的畢業(yè)設(shè)計困境臥槽這畢業(yè)設(shè)計是要我命啊當(dāng)我看到老師給出的文件管理系統(tǒng)需求時差點把剛買的珍珠奶茶噴出來。10G大文件上傳斷點續(xù)傳還要支持IE8還得加密這不就是讓我用諾基亞跑王者榮耀嗎我那個用了5年的聯(lián)想小新打開Chrome都卡得跟幻燈片似的現(xiàn)在要我用它開發(fā)支持10G文件上傳的系統(tǒng)怕不是要直接送我上天2. 我的技術(shù)選型心路歷程2.1 前端框架選擇“Vue3老師我愛死你了至少不用寫jQuery那種上古代碼…”// 這個文件上傳組件看起來不錯拿來就用import{ref}fromvue;constfileListref([]);constisUploadingref(false);constuploadProgressref(0);// 然后發(fā)現(xiàn)IE8根本不支持Vue3...// 卒2.2 斷點續(xù)傳的噩夢“斷點續(xù)傳不就是把文件切塊上傳嘛簡單”// 斷點續(xù)傳偽代碼 - 理想版functionresumeUpload(file){constchunkssliceFile(file);// 切塊chunks.forEach(chunk{if(!isUploaded(chunk)){uploadChunk(chunk);}});}// 實際開發(fā)中...functionresumeUpload(file){try{// 1. IE8不支持File API// 2. 切塊后瀏覽器崩潰// 3. 進度存LocalStorageIE8只有userData// 4. 10G文件內(nèi)存直接爆炸thrownewError(我想退學(xué));}catch(e){console.error(e.message);}}2.3 文件夾上傳的悲劇“保留層級結(jié)構(gòu)這需求聽起來就很貴…”// 文件夾上傳偽代碼 - 做夢版functionuploadFolder(folder){for(constentryoffolder.entries()){if(entry.isFile){uploadFile(entry);}else{createRemoteFolder(entry.name);uploadFolder(entry);}}}// 現(xiàn)實情況// 1. IE8連文件夾選擇都不支持// 2. 國產(chǎn)瀏覽器API千奇百怪// 3. 層級結(jié)構(gòu)先讓我能選中文件夾再說吧3. 我的SpringBoot后端崩潰實錄3.1 大文件上傳處理// 大文件上傳Controller - 理想版PostMapping(/upload)publicStringupload(RequestParam(file)MultipartFilefile){// 簡單接收文件file.transferTo(newFile(/uploads/file.getOriginalFilename()));return上傳成功!;}// 實際運行后// 1. 10G文件內(nèi)存溢出// 2. 超時那是必須的// 3. Tomcat 6.0配置maxPostSize10737418240后直接拒絕服務(wù)3.2 斷點續(xù)傳服務(wù)端// 分塊上傳接口 - 理論很美好PostMapping(/chunk)publicStringuploadChunk(RequestParam(file)MultipartFilechunk,RequestParam(chunkNumber)intchunkNumber,RequestParam(totalChunks)inttotalChunks){// 存儲分塊saveChunk(chunk,chunkNumber);if(isUploadComplete(totalChunks)){mergeChunks();return上傳完成;}return分塊已接收;}// 現(xiàn)實問題// 1. 分塊合并時服務(wù)器IO爆炸// 2. 并發(fā)上傳時數(shù)據(jù)庫鎖沖突// 3. 突然斷電數(shù)據(jù)一致性gg4. 我的加密方案鬧劇“加密傳輸和存儲這不就是加點鹽的事情嘛”// 文件加密存儲 - 初學(xué)者版publicvoidsaveFileWithEncryption(MultipartFilefile)throwsException{// 使用固定密鑰加密安全警告不要學(xué)StringkeymySuperSecretKey123;CiphercipherCipher.getInstance(AES);cipher.init(Cipher.ENCRYPT_MODE,newSecretKeySpec(key.getBytes(),AES));byte[]encryptedcipher.doFinal(file.getBytes());Files.write(Paths.get(/secure/file.getOriginalFilename()),encrypted);}// 問題清單// 1. 大文件直接讀入內(nèi)存內(nèi)存溢出// 2. 固定密鑰安全專家正在提刀趕來// 3. 性能加密10G文件夠我畢業(yè)10次了5. 兼容性災(zāi)難現(xiàn)場“支持IE8和國產(chǎn)瀏覽器老師您認(rèn)真的嗎”// 瀏覽器檢測代碼 - 逐漸崩潰版functioncheckBrowserCompatibility(){constisIE8/*cc_on!*/false||document.documentMode8;constisUOSBrowsernavigator.userAgent.includes(UOS);if(isIE8){alert(建議您升級瀏覽器或者換個電腦或者換個專業(yè)...);returnfalse;}if(isUOSBrowser){alert(國產(chǎn)瀏覽器支持功能有限要不您換Chrome);returnfalse;}returntrue;}// 測試結(jié)果// 學(xué)校機房電腦全部彈出第一個alert// 被老師叫去談話6. 我的救贖之路在經(jīng)歷了無數(shù)次崩潰后我終于摸索出一些可行的方案6.1 前端解決方案// 使用WebUploader的實際代碼constuploaderWebUploader.create({swf:path/to/Uploader.swf,// 閃存?zhèn)溆梅桨窱E8救命稻草server:/api/upload,pick:#filePicker,chunked:true,chunkSize:2*1024*1024,// 2MB每塊threads:3,// 并發(fā)數(shù)formData:{uid:123// 用戶標(biāo)識用于斷點續(xù)傳}});// 存儲上傳狀態(tài)到IndexedDB或WebSQLfunctionsaveUploadState(state){// 這里省略了各種瀏覽器兼容性判斷if(window.indexedDB){// 使用IndexedDB}elseif(window.openDatabase){// 使用WebSQL}else{// 使用cookie或localStorage容量有限}}6.2 后端改進方案// 使用隨機訪問文件處理大文件上傳PostMapping(/upload/chunk)publicResponseEntityuploadChunk(RequestParam(file)MultipartFilechunk,RequestParam(chunkNumber)intchunkNumber,RequestParam(totalChunks)inttotalChunks,RequestParam(identifier)Stringidentifier)throwsIOException{// 為每個文件創(chuàng)建臨時目錄PathtempDirPaths.get(/tmp/uploads,identifier);if(!Files.exists(tempDir)){Files.createDirectories(tempDir);}// 保存分塊到臨時文件PathchunkFiletempDir.resolve(String.valueOf(chunkNumber));Files.copy(chunk.getInputStream(),chunkFile,StandardCopyOption.REPLACE_EXISTING);// 檢查是否所有分塊都已上傳if(isUploadComplete(tempDir,totalChunks)){mergeFiles(tempDir,identifier);returnResponseEntity.ok(上傳完成);}returnResponseEntity.ok(分塊已接收);}7. 給后來者的血淚建議不要試圖完美支持IE8- 建議直接彈窗提示用戶升級瀏覽器分塊大小要合理- 2MB左右比較平衡使用現(xiàn)成庫- 比如WebUploader已經(jīng)解決了很多兼容性問題后端使用流式處理- 避免內(nèi)存爆炸測試要從早從小- 不要等寫完所有代碼才測試8. 找工作先活過畢業(yè)設(shè)計吧至于群里說的那些月入十萬的機會…學(xué)弟學(xué)妹們記住哥的話“如果一個群既要你交錢又要你拉人還承諾高回報…快跑這比你調(diào)試IE8兼容性問題還危險”現(xiàn)在我要繼續(xù)和我的文件管理系統(tǒng)搏斗了祝我好運吧如果你也有類似的畢業(yè)設(shè)計問題歡迎來交流但不保證能解決畢竟我也自身難保。SQL示例創(chuàng)建數(shù)據(jù)庫配置數(shù)據(jù)庫連接自動下載maven依賴啟動項目啟動成功訪問及測試默認(rèn)頁面接口定義在瀏覽器中訪問數(shù)據(jù)表中的數(shù)據(jù)效果預(yù)覽文件上傳文件刷新續(xù)傳支持離線保存文件進度在關(guān)閉瀏覽器刷新瀏覽器后進行不丟失仍然能夠繼續(xù)上傳文件夾上傳支持上傳文件夾并保留層級結(jié)構(gòu)同樣支持進度信息離線保存刷新頁面關(guān)閉頁面重啟系統(tǒng)不丟失上傳進度。示例下載下載完整示例