当前位置：首页 > news >正文

SpringMVC中如何处理百M级别大附件的上传下载？

news 2026/3/26 20:44:21

大三狗の毕业设计求生指南（附代码）

一、项目背景

作为一只即将被"赶出校门"的程序猿，最近被毕业设计折磨得头秃——导师要求做个文件管理系统，还必须支持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;}}}