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