前端与JAVA后端分块上传的协同实现经验

《Java老哥的100元奇迹》

各位同行好啊！我是一名来自甘肃的Java老程序员，最近接了个"史诗级"外包项目——预算高达100元人民币！这价格连兰州牛肉面都吃不了几碗，但客户要的功能怕是马化腾来了都得摇头…

一、需求分析：100元买航母

客户要求清单：

• 20G文件上传：我家宽带一个月流量都没20G
• IE9兼容：“业务机器不能扔”——这话听着就像"我爷爷的算盘还能用"
• 文件夹结构保持：1000个分类文件层级不能乱，这需求比我家的族谱还复杂
• 断点续传：关了浏览器进度不能丢，这功能应该叫"程序员寿命续传"
• 加密存储：SM4+AES双加密，我银行卡密码都没这么安全
• 7×24小时支持：100元买我命？

二、技术选型：用爱发电

前端方案（Vue3 + 原生JS地狱）

// 文件夹上传核心代码（IE9特别版）functionhandleFolderUpload(files){constpromise=newPromise((resolve,reject)=>{if(navigator.userAgent.indexOf('MSIE 9')>-1){alert('IE9用户请先升级到Windows 10');reject('建议客户扔掉这台电脑');}else{// 实际处理代码resolve('上传成功（可能）');}});returnpromise;}

后端方案（SpringBoot魔改版）

// 文件分片接收接口@PostMapping("/upload")publicResponseEntityupload(@RequestParam("file")MultipartFilefile,@RequestParam("chunkNumber")intchunkNumber,@RequestParam("totalChunks")inttotalChunks,HttpServletRequestrequest){// 预算只够写伪代码if(file.getSize()>20_000_000_000L){returnResponseEntity.badRequest().body("加钱！");}try{// 假装这里有很多代码returnResponseEntity.ok("第"+chunkNumber+"块上传成功");}catch(Exceptione){returnResponseEntity.status(500).body("建议预算加两个零");}}

三、加密实现（玄学版）

// SM4加密（伪代码）publicclassSM4Utils{publicstaticStringencrypt(Stringinput){// 真实实现需要300行代码// 但100元预算只配用Base64returnBase64.getEncoder().encodeToString(input.getBytes());}}

四、文件夹结构保持黑科技

// 数据库设计（精简版）@EntitypublicclassFileNode{@IdprivateStringid;privateStringpath;// 如 "/root/folder/file.txt"privatebooleanisDirectory;// 其他字段...}

五、断点续传实现思路

1. 前端计算文件hash作为唯一标识
2. 后端记录已上传分片信息
3. 每次上传前先查询上传进度

// 断点记录表@EntitypublicclassUploadProgress{@IdprivateStringfileHash;privateStringfileName;privateStringfilePath;privateinttotalChunks;privateStringuploadedChunks;// 如 "1,3,5-8"}

六、现实建议

1. 价格谈判：建议把单位从人民币改成比特币
2. IE9兼容：直接告诉客户加钱换电脑更划算
3. 20G文件：先确认客户服务器硬盘有多大
4. 时间估算：100元预算≈1小时工作量（含做梦时间）

七、QQ群真相揭秘

“加群送红包”：我加了群只收到空气红包
“项目提成50%”：最后发现是项目亏损的50%
“互联网大厂待遇”：大厂起码给交五险一金啊！

八、生存指南

1. 需求评审：把不合理需求都标成"加钱项"
2. 技术方案：尽量用现成轮子（虽然预算买不起）
3. 合同签订：写明"IE9支持需要额外付费"
4. 心态调整：准备好改行送外卖的Plan B

完整解决方案（做梦版）

如果真的不得不做：

1. 前端用Vue3+WebUploader魔改
2. 后端用SpringBoot+分片上传
3. 数据库记录文件树结构
4. 加密用Bouncy Castle库

但老哥们，100元连代码自动补全会员都买不起啊！要不咱们组团去送外卖吧？听说一个月能挣好几个100元呢！(手动狗头)

最后的呐喊：那个QQ群广告才是重点吧！老哥你其实是想拉人头对不对？（看破不说破）

导入项目

导入到Eclipse：点南查看教程
导入到IDEA：点击查看教程
springboot统一配置：点击查看教程

工程

NOSQL

NOSQL示例不需要任何配置，可以直接访问测试

创建数据表

选择对应的数据表脚本，这里以SQL为例

修改数据库连接信息

访问页面进行测试

文件存储路径

up6/upload/年/月/日/guid/filename

效果预览

文件上传

文件刷新续传

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

文件夹上传

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

下载示例

点击下载完整示例