老哥的大文件上传历险记
各位同行兄弟好啊！我是辽宁的一名"资深"(其实就是年纪大了) Java 程序员，最近接了个外包项目，要求可真是把我这老腰给闪了！
需求分析：这活儿比东北虎还猛
客户要的文件上传功能，那叫一个全面啊：
- 20G大文件传输（我硬盘才500G啊）
- 文件夹上传保留层级（1000个分类？这是要上天啊）
- 加密传输存储（SM4、AES全要）
- 断点续传（关浏览器、重启电脑都不能丢进度）
- 兼容IE9（这年头还有人用IE9？）
- 预算100元以内（我早餐都不止这个价啊！）
技术选型：老哥我太难了
前端要用原生JS实现，不能用现成框架。后端是SpringBoot+Vue3，这组合倒是挺时髦。但是！要兼容IE9？这不是让我用5G网络给大哥大打电话吗？
部分代码实现：能跑就行
前端部分 (原生JS)
// 文件上传核心逻辑 - 兼容IE9的魔改版functionuploadFile(file,relativePath=''){returnnewPromise((resolve,reject)=>{// 为IE9准备的XHR对象constxhr=window.XMLHttpRequest?newXMLHttpRequest():newActiveXObject("Microsoft.XMLHTTP");// 分片上传逻辑constchunkSize=5*1024*1024;// 5MBletoffset=0;// 读取文件分片constreadChunk=()=>{constchunk=file.slice(offset,offset+chunkSize);// 加密分片 (伪代码)constencryptedChunk=encryptChunk(chunk,'SM4');constformData=newFormData();formData.append('file',encryptedChunk);formData.append('fileName',file.name);formData.append('relativePath',relativePath);formData.append('totalSize',file.size);formData.append('chunkSize',chunkSize);formData.append('offset',offset);xhr.open('POST','/api/upload',true);xhr.setRequestHeader('X-Requested-With','XMLHttpRequest');xhr.onload=function(){if(xhr.status===200){offset+=chunkSize;if(offset<file.size){readChunk();// 继续上传下一分片}else{resolve();// 上传完成}}else{reject(newError('上传失败'));}};xhr.send(formData);};readChunk();});}// 文件夹上传 - 递归处理functionuploadFolder(entries,relativePath=''){returnPromise.all(Array.from(entries).map(entry=>{returnnewPromise((resolve)=>{if(entry.isFile){entry.file(file=>{uploadFile(file,relativePath).then(resolve);});}elseif(entry.isDirectory){constdirReader=entry.createReader();dirReader.readEntries(entries=>{uploadFolder(entries,`${relativePath}/${entry.name}`).then(resolve);});}});}));}后端部分 (SpringBoot)
@RestController@RequestMapping("/api")publicclassFileUploadController{@PostMapping("/upload")publicResponseEntityuploadFile(@RequestParam("file")MultipartFilefile,@RequestParam("fileName")StringfileName,@RequestParam(value="relativePath",defaultValue="")StringrelativePath,@RequestParam("totalSize")longtotalSize,@RequestParam("chunkSize")intchunkSize,@RequestParam("offset")longoffset){try{// 解密文件分片 (伪代码)byte[]decryptedData=decryptChunk(file.getBytes(),"SM4");// 构建目标路径，保留文件夹结构PathtargetPath=Paths.get("uploads",relativePath,fileName);Files.createDirectories(targetPath.getParent());// 断点续传处理if(offset==0){Files.write(targetPath,decryptedData);}else{Files.write(targetPath,decryptedData,StandardOpenOption.APPEND);}// 检查是否上传完成longuploadedSize=offset+chunkSize;if(uploadedSize>=totalSize){// 文件上传完成后的处理returnResponseEntity.ok().body("上传完成");}else{returnResponseEntity.ok().body("分片上传成功");}}catch(Exceptione){returnResponseEntity.status(500).body("上传失败: "+e.getMessage());}}// 文件夹下载接口@GetMapping("/downloadFolder")publicvoiddownloadFolder(@RequestParamStringfolderPath,HttpServletResponseresponse)throwsIOException{PathsourcePath=Paths.get("uploads",folderPath);if(!Files.exists(sourcePath)){response.sendError(404,"文件夹不存在");return;}response.setContentType("application/octet-stream");response.setHeader("Content-Disposition","attachment; filename=\""+URLEncoder.encode(sourcePath.getFileName().toString(),"UTF-8")+"\"");// 非打包下载，逐个文件传输try(OutputStreamout=response.getOutputStream()){Files.walk(sourcePath).filter(Files::isRegularFile).forEach(file->{try{// 保留相对路径StringrelativePath=sourcePath.relativize(file).toString();// 写入文件信息头out.write(("FILE:"+relativePath+":"+Files.size(file)+"\n").getBytes());// 写入文件内容Files.copy(file,out);out.write("\n\n".getBytes());// 文件分隔符}catch(IOExceptione){thrownewUncheckedIOException(e);}});}}}老哥的心里话
兄弟们啊，100块钱预算要搞这么复杂的系统，这不是难为我这"资深"程序员吗？还要7×24小时技术支持，这得加多少个鸡腿啊！
不过话说回来，咱们程序员不就是喜欢挑战吗？虽然这需求比东北的冬天还冷，但谁让咱们是"代码界的抗寒战士"呢！
友情提示：完整实现这个系统需要解决很多细节问题，比如：
- 大文件分片上传的稳定性
- IE9兼容性的各种坑
- 文件夹层级结构的准确保持
- 加密性能优化
- 断点续传的状态管理
如果真要做成产品级质量，建议：
- 增加预算（至少加两个零）
- 考虑使用成熟的文件存储服务
- 放弃IE9支持（真心的！）
欢迎加入我们的QQ群(374992201)一起讨论，虽然红包可能没有99元那么大，但技术交流绝对真诚！
安装环境
PHP:7.2.14
调整块大小
NOSQL
NOSQL不需要任何配置，可以直接访问测试
SQL
创建数据库
您可以直接复制脚本进行创建
配置数据库连接
安装依赖
访问页面进行测试
数据表中的数据
效果预览
文件上传
文件刷新续传
支持离线保存文件进度，在关闭浏览器，刷新浏览器后进行不丢失，仍然能够继续上传
文件夹上传
支持上传文件夹并保留层级结构，同样支持进度信息离线保存，刷新页面，关闭页面，重启系统不丢失上传进度。
免费下载示例
点击下载完整示例
