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

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

一、项目背景

作为一只即将被"赶出校门"的程序猿，最近被毕业设计折磨得头秃——导师要求做个文件管理系统，还必须支持10G大文件上传+文件夹上传+加密存储+跨浏览器兼容。更离谱的是，导师还特意强调：“必须用原生JS实现，不能用第三方库！”（后来才知道是怕我抄代码）

现在的情况是：

• 前端：Vue3 + 原生JS（IE8兼容模式）
• 后端：SpringBoot（导师说这是"职场硬通货"）
• 存储：阿里云OSS（学校机房的CentOS虚拟机跑得比蜗牛还慢）
• 浏览器：从IE8到Chrome120全兼容（包括信创浏览器这种"上古神器"）

二、技术选型（狗头保命版）

1. 上传组件：

   • 百度WebUploader（已停更，但IE8支持好）
   • H5 File API（现代浏览器用）
   • 最终方案：WebUploader + H5双引擎驱动（类似混动车）

2. 加密方案：

   • 传输加密：AES-256（IE8用CryptoJS降级）
   • 存储加密：SM4（国产信创要求）
   • 密钥管理：用户密码+盐值哈希（防止导师偷看我的学习资料）

3. 断点续传：

   • 进度存储：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兼容血泪史

1. 文件夹上传：

   • 现代浏览器：``
   • IE8：需要用ActiveXObject遍历文件系统（需要降低安全级别）

2. 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');}

3. XMLHttpRequest降级：

   // IE8的XHR实现functioncreateIE8XHR(){try{returnnewActiveXObject("Msxml2.XMLHTTP");}catch(e){try{returnnewActiveXObject("Microsoft.XMLHTTP");}catch(e){returnnull;}}}

六、项目亮点（吹牛版）

1. 全浏览器兼容：从IE8到Chrome120无缝支持
2. 军工级加密：AES+SM4双算法支持（导师看了都直呼专业）
3. 企业级稳定性：Redis+MySQL双进度存储（就算地球爆炸也不丢进度）
4. 信创环境适配：已通过龙芯浏览器测试（学校机房的国产CPU终于有用武之地了）

七、求职彩蛋

现在加入我的"毕业设计互助群"（QQ：374992201），即可获得：

1. 完整项目源码（含IE8兼容补丁）
2. 简历优化指导（群主亲授"如何把毕业设计吹成国家级项目"）
3. 内推机会（群内有多家IT公司HR潜伏）

特别提示：现在加群还能参与"找bug换红包"活动，每发现一个兼容性问题奖励5-20元（导师说这叫"众测"）！

（最后小声说：其实这个项目还没完全跑通，但吹牛的功夫已经练得炉火纯青了…）

SQL示例

创建数据库

配置数据库连接

自动下载maven依赖

启动项目

启动成功

访问及测试

默认页面接口定义

在浏览器中访问

数据表中的数据

效果预览

文件上传

文件刷新续传

支持离线保存文件进度，在关闭浏览器，刷新浏览器后进行不丢失，仍然能够继续上传

文件夹上传

支持上传文件夹并保留层级结构，同样支持进度信息离线保存，刷新页面，关闭页面，重启系统不丢失上传进度。

示例下载

下载完整示例