程序猿の毕业设计渡劫指南附代码求生攻略一、项目背景哭唧唧版作为一只即将被学校扫地出门的计科狗最近被毕业设计折磨得夜不能寐——导师甩下一句“做个文件管理系统要支持10G大文件上传文件夹断点续传IE8兼容否则别想毕业”说完就骑着共享单车溜了现在的情况是前端Vue3 原生JS要兼容到IE8比让恐龙玩Switch还离谱后端SpringBoot跑在Tomcat 6.0上比我家老古董电视还卡存储直接塞服务器硬盘导师说云存储太贵咱们穷苦大学生要艰苦奋斗浏览器从IE8到Chrome120全兼容包括龙芯浏览器这种国产神器二、技术选型妥协版上传组件现代浏览器H5 File API Web Workers防卡死IE8WebUploader Flash没错2023年还要写Flash代码最终方案双引擎热切换像混动车一样智能加密方案传输加密AES-128IE8用CryptoJS降级存储加密SM4信创浏览器强制要求密钥管理用户密码时间戳盐值防止导师偷看我学习资料断点续传进度存储localStorageIE8用userData模拟服务端记录MySQL文件系统双保险防止浏览器清空数据三、前端实现Vue3 原生JS// FileUploader.vue精简求生版exportdefault{data(){return{progress:0,isIE8:!!window.ActiveXObject||ActiveXObjectinwindow,chunkSize:5*1024*1024// 5MB分片}},methods:{triggerUpload(){if(this.isIE8){// 触发IE8上传通过iframe通信document.getElementById(ie8Uploader).contentWindow.startUpload();}else{// 现代浏览器直接触发document.getElementById(modernFileInput).click();}},// 现代浏览器文件处理handleModernFileChange(e){constfilese.target.files;Array.from(files).forEach(file{if(file.webkitRelativePath){this.uploadFolder(file);// 文件夹上传}else{this.uploadFile(file);}});},// 文件分片上传现代浏览器asyncuploadFile(file){constfileIdthis.generateFileId(file);consttotalChunksMath.ceil(file.size/this.chunkSize);letuploadedChunksthis.getSavedProgress(fileId)||0;for(letiuploadedChunks;itotalChunks;i){conststarti*this.chunkSize;constendMath.min(startthis.chunkSize,file.size);constchunkfile.slice(start,end);// 加密分片简化版constencryptedthis.encryptData(chunk);constformDatanewFormData();formData.append(file,encrypted);formData.append(fileId,fileId);formData.append(chunkIndex,i);formData.append(totalChunks,totalChunks);try{awaitfetch(/api/upload/chunk,{method:POST,body:formData});this.progressMath.floor(((i1)/totalChunks)*100);this.saveProgress(fileId,i1);}catch(e){console.error(上传失败:,e);break;}}},// IE8兼容方案伪代码uploadFileIE8(file){// 这里需要写100行ActiveXObject代码...// 核心思路通过XMLHttpRequest分片上传// 省略IE8兼容代码手酸了...},// 生成唯一文件ID兼容IE8generateFileId(file){if(this.isIE8){returnfile.namefile.sizefile.lastModified;// 简单拼接}returnfile.name-CryptoJS.MD5(file.namefile.size).toString();}}}四、后端实现SpringBoot Tomcat 6.0// FileUploadController.java求生版RestControllerRequestMapping(/api/upload)publicclassFileUploadController{Value(${file.upload-dir})privateStringuploadDir;// 初始化上传任务PostMapping(/init)publicResponseEntityinitUpload(RequestParamStringfileName,RequestParamlongfileSize){StringfileIdUUID.randomUUID().toString();StringtempDiruploadDir/temp/fileId;// 创建临时目录Tomcat 6.0需要手动处理路径newFile(tempDir).mkdirs();MapresponsenewHashMap();response.put(fileId,fileId);response.put(chunkSize,5242880);// 5MBresponse.put(uploadDir,tempDir);returnResponseEntity.ok(response);}// 处理分片上传PostMapping(/chunk)publicResponseEntityuploadChunk(RequestParam(file)MultipartFilefile,RequestParamStringfileId,RequestParamintchunkIndex,RequestParaminttotalChunks){try{StringtempDiruploadDir/temp/fileId;StringchunkPathtempDir/chunkIndex;// 解密文件简化版byte[]decrypteddecrypt(file.getBytes());// 保存分片Tomcat 6.0文件操作Files.write(Paths.get(chunkPath),decrypted);// 如果是最后一个分片合并文件if(chunkIndextotalChunks-1){mergeFile(fileId,tempDir);}returnResponseEntity.ok().build();}catch(Exceptione){returnResponseEntity.status(500).build();}}// 合并文件Tomcat 6.0兼容版privatevoidmergeFile(StringfileId,StringtempDir)throwsIOException{File[]chunksnewFile(tempDir).listFiles();if(chunksnull||chunks.length0)return;// 按分片序号排序Arrays.sort(chunks,Comparator.comparingInt(f-{Stringnamef.getName();returnInteger.parseInt(name);}));// 读取原始文件名从第一个分片中获取StringfileNameunknown;// 实际应从数据库或第一个分片获取StringoutputPathuploadDir/fileName;try(FileOutputStreamfosnewFileOutputStream(outputPath)){for(Filechunk:chunks){Files.copy(chunk.toPath(),fos);chunk.delete();// 删除分片}}// 删除临时目录newFile(tempDir).delete();}}五、IE8兼容血泪史附解决方案文件夹上传现代浏览器IE8需要用ActiveXObject遍历文件系统需要降低安全级别// IE8文件夹遍历伪代码functionbrowseFolderIE8(path){try{constfsonewActiveXObject(Scripting.FileSystemObject);constfolderfso.GetFolder(path);constfilesnewEnumerator(folder.files);for(;!files.atEnd();files.moveNext()){constfilefiles.item();// 递归处理子文件夹...}}catch(e){alert(请降低IE安全级别);}}localStorage替代方案// IE8的userData存储古老的黑科技functionsaveToUserData(key,value){conststoragedocument.createElement(div);storage.idie8Storage;storage.style.behaviorurl(#default#userData);document.body.appendChild(storage);storage.setAttribute(key,value);storage.save(fileUploadProgress);document.body.removeChild(storage);}XMLHttpRequest降级// IE8的XHR实现functioncreateIE8XHR(){try{returnnewActiveXObject(Msxml2.XMLHTTP);}catch(e){try{returnnewActiveXObject(Microsoft.XMLHTTP);}catch(e){alert(您的浏览器太古老了请升级);returnnull;}}}六、项目亮点吹牛版全浏览器兼容从IE8到Chrome120无缝支持连龙芯浏览器都能跑军工级加密AESSM4双算法支持导师看了都直呼专业企业级稳定性MySQL文件系统双进度存储就算服务器爆炸也不丢数据信创环境适配已通过龙芯浏览器测试学校机房的国产CPU终于有用武之地了七、求职彩蛋现在加入我的毕业设计互助群QQ374992201即可获得完整项目源码含IE8兼容补丁简历优化指导群主亲授如何把毕业设计吹成国家级项目内推机会群内有多家IT公司HR潜伏特别提示现在加群还能参与找bug换红包活动每发现一个兼容性问题奖励5-20元导师说这叫众测最后小声说这个项目还没完全跑通但吹牛的功夫已经练得炉火纯青了…导入项目导入到Eclipse点击查看教程导入到IDEA点击查看教程springboot统一配置点击查看教程工程NOSQLNOSQL示例不需要任何配置可以直接访问测试创建数据表选择对应的数据表脚本这里以SQL为例修改数据库连接信息访问页面进行测试文件存储路径up6/upload/年/月/日/guid/filename效果预览文件上传文件刷新续传支持离线保存文件进度在关闭浏览器刷新浏览器后进行不丢失仍然能够继续上传文件夹上传支持上传文件夹并保留层级结构同样支持进度信息离线保存刷新页面关闭页面重启系统不丢失上传进度。下载示例点击下载完整示例