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

教育行业里，JAVA如何处理大文件上传需求？

news 2026/5/11 17:18:17

程序猿の毕业设计渡劫指南（附代码+求生攻略）

一、项目背景（哭唧唧版）

作为一只即将被学校"扫地出门"的计科狗，最近被毕业设计折磨得夜不能寐——导师甩下一句：“做个文件管理系统，要支持10G大文件上传+文件夹+断点续传+IE8兼容，否则别想毕业！”（说完就骑着共享单车溜了）

现在的情况是：

前端：Vue3 + 原生JS（要兼容到IE8，比让恐龙玩Switch还离谱）
后端：SpringBoot（跑在Tomcat 6.0上，比我家老古董电视还卡）
存储：直接塞服务器硬盘（导师说"云存储太贵，咱们穷苦大学生要艰苦奋斗"）
浏览器：从IE8到Chrome120全兼容（包括龙芯浏览器这种"国产神器"）

二、技术选型（妥协版）

上传组件：
- 现代浏览器：H5 File API + Web Workers（防卡死）
- IE8：WebUploader + Flash（没错，2023年还要写Flash代码）
- 最终方案：双引擎热切换（像混动车一样智能）
加密方案：
- 传输加密：AES-128（IE8用CryptoJS降级）
- 存储加密：SM4（信创浏览器强制要求）
- 密钥管理：用户密码+时间戳盐值（防止导师偷看我学习资料）
断点续传：
- 进度存储：localStorage（IE8用userData模拟）
- 服务端记录：MySQL+文件系统双保险（防止浏览器清空数据）

三、前端实现（Vue3 + 原生JS）

// FileUploader.vue（精简求生版）exportdefault{data(){return{progress:0,isIE8:!!window.ActiveXObject||"ActiveXObject"inwindow,chunkSize:5*1024*1024// 5MB分片}},methods:{triggerUpload(){if(this.isIE8){// 触发IE8上传（通过iframe通信）document.getElementById('ie8Uploader').contentWindow.startUpload();}else{// 现代浏览器直接触发document.getElementById('modernFileInput').click();}},// 现代浏览器文件处理handleModernFileChange(e){constfiles=e.target.files;Array.from(files).forEach(file=>{if(file.webkitRelativePath){this.uploadFolder(file);// 文件夹上传}else{this.uploadFile(file);}});},// 文件分片上传（现代浏览器）asyncuploadFile(file){constfileId=this.generateFileId(file);consttotalChunks=Math.ceil(file.size/this.chunkSize);letuploadedChunks=this.getSavedProgress(fileId)||0;for(leti=uploadedChunks;i<totalChunks;i++){conststart=i*this.chunkSize;constend=Math.min(start+this.chunkSize,file.size);constchunk=file.slice(start,end);// 加密分片（简化版）constencrypted=this.encryptData(chunk);constformData=newFormData();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.progress=Math.floor(((i+1)/totalChunks)*100);this.saveProgress(fileId,i+1);}catch(e){console.error('上传失败:',e);break;}}},// IE8兼容方案（伪代码）uploadFileIE8(file){// 这里需要写100行ActiveXObject代码...// 核心思路：通过XMLHttpRequest分片上传// 省略IE8兼容代码（手酸了）...},// 生成唯一文件ID（兼容IE8）generateFileId(file){if(this.isIE8){returnfile.name+file.size+file.lastModified;// 简单拼接}returnfile.name+'-'+CryptoJS.MD5(file.name+file.size).toString();}}}

四、后端实现（SpringBoot + Tomcat 6.0）

// FileUploadController.java（求生版）@RestController@RequestMapping("/api/upload")publicclassFileUploadController{@Value("${file.upload-dir}")privateStringuploadDir;// 初始化上传任务@PostMapping("/init")publicResponseEntity>initUpload(@RequestParamStringfileName,@RequestParamlongfileSize){StringfileId=UUID.randomUUID().toString();StringtempDir=uploadDir+"/temp/"+fileId;// 创建临时目录（Tomcat 6.0需要手动处理路径）newFile(tempDir).mkdirs();Mapresponse=newHashMap<>();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{StringtempDir=uploadDir+"/temp/"+fileId;StringchunkPath=tempDir+"/"+chunkIndex;// 解密文件（简化版）byte[]decrypted=decrypt(file.getBytes());// 保存分片（Tomcat 6.0文件操作）Files.write(Paths.get(chunkPath),decrypted);// 如果是最后一个分片，合并文件if(chunkIndex==totalChunks-1){mergeFile(fileId,tempDir);}returnResponseEntity.ok().build();}catch(Exceptione){returnResponseEntity.status(500).build();}}// 合并文件（Tomcat 6.0兼容版）privatevoidmergeFile(StringfileId,StringtempDir)throwsIOException{File[]chunks=newFile(tempDir).listFiles();if(chunks==null||chunks.length==0)return;// 按分片序号排序Arrays.sort(chunks,Comparator.comparingInt(f->{Stringname=f.getName();returnInteger.parseInt(name);}));// 读取原始文件名（从第一个分片中获取）StringfileName="unknown";// 实际应从数据库或第一个分片获取StringoutputPath=uploadDir+"/"+fileName;try(FileOutputStreamfos=newFileOutputStream(outputPath)){for(Filechunk:chunks){Files.copy(chunk.toPath(),fos);chunk.delete();// 删除分片}}// 删除临时目录newFile(tempDir).delete();}}

五、IE8兼容血泪史（附解决方案）

文件夹上传：

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

// IE8文件夹遍历（伪代码）functionbrowseFolderIE8(path){try{constfso=newActiveXObject("Scripting.FileSystemObject");constfolder=fso.GetFolder(path);constfiles=newEnumerator(folder.files);for(;!files.atEnd();files.moveNext()){constfile=files.item();// 递归处理子文件夹...}}catch(e){alert("请降低IE安全级别！");}}

localStorage替代方案：

// IE8的userData存储（古老的黑科技）functionsaveToUserData(key,value){conststorage=document.createElement('div');storage.id='ie8Storage';storage.style.behavior='url(#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;}}}