大三狗の毕业设计求生指南（附代码）
一、项目背景
作为一只即将被"赶出校门"的程序猿，最近被毕业设计折磨得头秃——导师要求做个文件管理系统，还必须支持10G大文件上传+文件夹上传+加密存储+跨浏览器兼容。更离谱的是，导师还特意强调：“必须用原生JS实现，不能用第三方库！”（后来才知道是怕我抄代码）
现在的情况是：
- 前端：Vue3 + 原生JS（IE8兼容模式）
- 后端：SpringBoot（导师说这是"职场硬通货"）
- 存储：阿里云OSS（学校机房的CentOS虚拟机跑得比蜗牛还慢）
- 浏览器：从IE8到Chrome120全兼容（包括信创浏览器这种"上古神器"）
二、技术选型（狗头保命版）
上传组件：
- 百度WebUploader（已停更，但IE8支持好）
- H5 File API（现代浏览器用）
- 最终方案：WebUploader + H5双引擎驱动（类似混动车）
加密方案：
- 传输加密：AES-256（IE8用CryptoJS降级）
- 存储加密：SM4（国产信创要求）
- 密钥管理：用户密码+盐值哈希（防止导师偷看我的学习资料）
断点续传：
- 进度存储：localStorage（IE8用userData模拟）
- 服务端记录：MySQL+Redis双保险（防止浏览器清空数据）
三、前端实现（Vue3 + 原生JS）
// FileUploader.vue（精简版）exportdefault{data(){return{progress:0,uploader:null,isIE8:!!window.ActiveXObject||"ActiveXObject"inwindow}},mounted(){this.initUploader();},methods:{initUploader(){if(this.isIE8){// IE8专属降级方案this.uploader=newIE8Uploader();}else{// 现代浏览器方案this.uploader=newWebUploader.create({swf:'/path/to/Uploader.swf',// IE8需要Flashserver:'/api/upload',chunked:true,chunkSize:5*1024*1024,// 5MB分片threads:3,formData:{cryptoType:'AES'// 默认加密算法}});}// 监听上传进度this.uploader.on('uploadProgress',(file,percentage)=>{this.progress=Math.floor(percentage*100);this.saveProgress(file.id,percentage);});},startUpload(){constfileInput=document.getElementById('fileInput');constfiles=this.isIE8?this.getIE8Files(fileInput)// IE8特殊处理:fileInput.files;Array.from(files).forEach(file=>{if(file.webkitRelativePath){// 文件夹上传处理this.handleFolder(file);}else{this.uploadFile(file);}});},// IE8获取文件（降级方案）getIE8Files(input){constfiles=[];// 这里需要写一堆ActiveXObject代码...// 省略100行IE8兼容代码...returnfiles;},// 保存进度到本地存储saveProgress(fileId,progress){try{if(this.isIE8){// IE8用userData模拟localStoragedocument.getElementById('progressStorage').setAttribute('progress',progress);}else{localStorage.setItem(`progress_${fileId}`,progress);}}catch(e){console.error('存储进度失败:',e);}}}}四、后端实现（SpringBoot）
// FileUploadController.java@RestController@RequestMapping("/api/upload")publicclassFileUploadController{@AutowiredprivateOSSClientossClient;@AutowiredprivateRedisTemplateredisTemplate;@PostMapping("/init")publicResponseEntity>initUpload(@RequestParamStringfileName,@RequestParamlongfileSize,@RequestParam(required=false)StringcryptoType){// 生成唯一任务IDStringtaskId=UUID.randomUUID().toString();// 初始化Redis进度记录redisTemplate.opsForValue().set("upload:"+taskId+":progress","0");// 返回上传参数Mapresponse=newHashMap<>();response.put("taskId",taskId);response.put("chunkSize","5242880");// 5MBresponse.put("ossEndpoint","your-oss-endpoint");returnResponseEntity.ok(response);}@PostMapping("/chunk")publicResponseEntityuploadChunk(@RequestParamStringtaskId,@RequestParamintchunkNumber,@RequestParamStringfileMd5,@RequestParamMultipartFilefile){try{// 解密分片（这里简化处理）byte[]decrypted=CryptoUtil.decrypt(file.getBytes(),"your-secret-key");// 上传到OSSStringobjectKey="uploads/"+taskId+"/"+chunkNumber;ossClient.putObject("your-bucket",objectKey,newByteArrayInputStream(decrypted));// 更新进度redisTemplate.opsForValue().increment("upload:"+taskId+":progress");returnResponseEntity.ok().build();}catch(Exceptione){returnResponseEntity.status(500).build();}}}五、IE8兼容血泪史
文件夹上传：
- 现代浏览器：``
- IE8：需要用ActiveXObject遍历文件系统（需要降低安全级别）
localStorage替代方案：
// IE8的userData存储（古老的黑科技）functionsaveToUserData(key,value){conststorage=document.getElementById('hiddenStorage');storage.setAttribute(key,value);storage.expires=newDate(newDate().getTime()+3600000).toUTCString();// 1小时过期storage.save('fileUploadProgress');}XMLHttpRequest降级：
// IE8的XHR实现functioncreateIE8XHR(){try{returnnewActiveXObject("Msxml2.XMLHTTP");}catch(e){try{returnnewActiveXObject("Microsoft.XMLHTTP");}catch(e){returnnull;}}}
六、项目亮点（吹牛版）
- 全浏览器兼容：从IE8到Chrome120无缝支持
- 军工级加密：AES+SM4双算法支持（导师看了都直呼专业）
- 企业级稳定性：Redis+MySQL双进度存储（就算地球爆炸也不丢进度）
- 信创环境适配：已通过龙芯浏览器测试（学校机房的国产CPU终于有用武之地了）
七、求职彩蛋
现在加入我的"毕业设计互助群"（QQ：374992201），即可获得：
- 完整项目源码（含IE8兼容补丁）
- 简历优化指导（群主亲授"如何把毕业设计吹成国家级项目"）
- 内推机会（群内有多家IT公司HR潜伏）
特别提示：现在加群还能参与"找bug换红包"活动，每发现一个兼容性问题奖励5-20元（导师说这叫"众测"）！
（最后小声说：其实这个项目还没完全跑通，但吹牛的功夫已经练得炉火纯青了…）
SQL示例
创建数据库
配置数据库连接
自动下载maven依赖
启动项目
启动成功
访问及测试
默认页面接口定义
在浏览器中访问
数据表中的数据
效果预览
文件上传
文件刷新续传
支持离线保存文件进度，在关闭浏览器，刷新浏览器后进行不丢失，仍然能够继续上传
文件夹上传
支持上传文件夹并保留层级结构，同样支持进度信息离线保存，刷新页面，关闭页面，重启系统不丢失上传进度。
示例下载
下载完整示例
)
