滦南网站建设,工商登记注册身份验证app,wordpress添加面包屑,营销方案流程文件管理系统毕业设计#xff1a;从零到崩溃的全过程
1. 我的毕业设计困境
卧槽#xff0c;这毕业设计是要我命啊#xff01;当我看到老师给出的文件管理系统需求时#xff0c;差点把刚买的珍珠奶茶喷出来。
10G大文件上传#xff1f;断点续传#xff1f;…文件管理系统毕业设计从零到崩溃的全过程1. 我的毕业设计困境卧槽这毕业设计是要我命啊当我看到老师给出的文件管理系统需求时差点把刚买的珍珠奶茶喷出来。10G大文件上传断点续传还要支持IE8还得加密这不就是让我用诺基亚跑王者荣耀吗我那个用了5年的联想小新打开Chrome都卡得跟幻灯片似的现在要我用它开发支持10G文件上传的系统怕不是要直接送我上天2. 我的技术选型心路历程2.1 前端框架选择“Vue3老师我爱死你了至少不用写jQuery那种上古代码…”// 这个文件上传组件看起来不错拿来就用import{ref}fromvue;constfileListref([]);constisUploadingref(false);constuploadProgressref(0);// 然后发现IE8根本不支持Vue3...// 卒2.2 断点续传的噩梦“断点续传不就是把文件切块上传嘛简单”// 断点续传伪代码 - 理想版functionresumeUpload(file){constchunkssliceFile(file);// 切块chunks.forEach(chunk{if(!isUploaded(chunk)){uploadChunk(chunk);}});}// 实际开发中...functionresumeUpload(file){try{// 1. IE8不支持File API// 2. 切块后浏览器崩溃// 3. 进度存LocalStorageIE8只有userData// 4. 10G文件内存直接爆炸thrownewError(我想退学);}catch(e){console.error(e.message);}}2.3 文件夹上传的悲剧“保留层级结构这需求听起来就很贵…”// 文件夹上传伪代码 - 做梦版functionuploadFolder(folder){for(constentryoffolder.entries()){if(entry.isFile){uploadFile(entry);}else{createRemoteFolder(entry.name);uploadFolder(entry);}}}// 现实情况// 1. IE8连文件夹选择都不支持// 2. 国产浏览器API千奇百怪// 3. 层级结构先让我能选中文件夹再说吧3. 我的SpringBoot后端崩溃实录3.1 大文件上传处理// 大文件上传Controller - 理想版PostMapping(/upload)publicStringupload(RequestParam(file)MultipartFilefile){// 简单接收文件file.transferTo(newFile(/uploads/file.getOriginalFilename()));return上传成功!;}// 实际运行后// 1. 10G文件内存溢出// 2. 超时那是必须的// 3. Tomcat 6.0配置maxPostSize10737418240后直接拒绝服务3.2 断点续传服务端// 分块上传接口 - 理论很美好PostMapping(/chunk)publicStringuploadChunk(RequestParam(file)MultipartFilechunk,RequestParam(chunkNumber)intchunkNumber,RequestParam(totalChunks)inttotalChunks){// 存储分块saveChunk(chunk,chunkNumber);if(isUploadComplete(totalChunks)){mergeChunks();return上传完成;}return分块已接收;}// 现实问题// 1. 分块合并时服务器IO爆炸// 2. 并发上传时数据库锁冲突// 3. 突然断电数据一致性gg4. 我的加密方案闹剧“加密传输和存储这不就是加点盐的事情嘛”// 文件加密存储 - 初学者版publicvoidsaveFileWithEncryption(MultipartFilefile)throwsException{// 使用固定密钥加密安全警告不要学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. 大文件直接读入内存内存溢出// 2. 固定密钥安全专家正在提刀赶来// 3. 性能加密10G文件够我毕业10次了5. 兼容性灾难现场“支持IE8和国产浏览器老师您认真的吗”// 浏览器检测代码 - 逐渐崩溃版functioncheckBrowserCompatibility(){constisIE8/*cc_on!*/false||document.documentMode8;constisUOSBrowsernavigator.userAgent.includes(UOS);if(isIE8){alert(建议您升级浏览器或者换个电脑或者换个专业...);returnfalse;}if(isUOSBrowser){alert(国产浏览器支持功能有限要不您换Chrome);returnfalse;}returntrue;}// 测试结果// 学校机房电脑全部弹出第一个alert// 被老师叫去谈话6. 我的救赎之路在经历了无数次崩溃后我终于摸索出一些可行的方案6.1 前端解决方案// 使用WebUploader的实际代码constuploaderWebUploader.create({swf:path/to/Uploader.swf,// 闪存备用方案IE8救命稻草server:/api/upload,pick:#filePicker,chunked:true,chunkSize:2*1024*1024,// 2MB每块threads:3,// 并发数formData:{uid:123// 用户标识用于断点续传}});// 存储上传状态到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{// 为每个文件创建临时目录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左右比较平衡使用现成库- 比如WebUploader已经解决了很多兼容性问题后端使用流式处理- 避免内存爆炸测试要从早从小- 不要等写完所有代码才测试8. 找工作先活过毕业设计吧至于群里说的那些月入十万的机会…学弟学妹们记住哥的话“如果一个群既要你交钱又要你拉人还承诺高回报…快跑这比你调试IE8兼容性问题还危险”现在我要继续和我的文件管理系统搏斗了祝我好运吧如果你也有类似的毕业设计问题欢迎来交流但不保证能解决毕竟我也自身难保。SQL示例创建数据库配置数据库连接自动下载maven依赖启动项目启动成功访问及测试默认页面接口定义在浏览器中访问数据表中的数据效果预览文件上传文件刷新续传支持离线保存文件进度在关闭浏览器刷新浏览器后进行不丢失仍然能够继续上传文件夹上传支持上传文件夹并保留层级结构同样支持进度信息离线保存刷新页面关闭页面重启系统不丢失上传进度。示例下载下载完整示例