news 2026/9/3 2:12:05

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

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
前端与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

效果预览

文件上传

文件刷新续传

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

文件夹上传

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

下载示例

点击下载完整示例

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/9/2 23:41:13

:has 伪类选择器(“父选择器” 或 “反向选择器” )

CSS4 引入了 :has() 伪类选择器&#xff0c;可以实现这样的需求。比如&#xff1a;.parent:has(.child) {background: yellow; }这条语句会选中所有拥有 .child 子元素的 .parent 元素。<!doctype html> <html lang"en"><head><meta charset&qu…

作者头像 李华
网站建设 2026/9/2 21:56:00

2025年java总结:缝缝补补又一年?

图片来源网络&#xff0c;侵权联系删 文章目录引言一、兼容性与创新的精妙平衡二、Project Loom三、GraalVM原生镜像四、AI工程化五、模块化架构六、常见问题解答总结引言 在Python、Go、Rust等语言的冲击下&#xff0c;Java似乎总是在"打补丁"而非彻底革新。然而&a…

作者头像 李华
网站建设 2026/9/2 21:57:08

WSL2安装配置

WSL2安装配置安装默认phplaravel启动环境知乎文章&#xff1a;https://zhuanlan.zhihu.com/p/1961718875029758545 踩坑(装得慢)之后流程&#xff1a; 打开windows powershell 不是 cmdInvoke-WebRequest -Uri https://wslstorestorage.blob.core.windows.net/wslblob/wsl_up…

作者头像 李华
网站建设 2026/9/2 15:00:18

产品为王!用友HR SaaS斩获2025数字人力资源科技最佳产品奖

近期&#xff0c;备受行业瞩目的2025数字人力资源科技奖&#xff08;Digital HRTech Awards&#xff09;正式揭晓&#xff0c;用友HR SaaS成功斩获“2025数字人力资源科技最佳产品奖”。本奖项聚焦人力资源科技的创新价值与实践成效&#xff0c;是行业内极具权威性的专业评选。…

作者头像 李华