news 2026/10/15 1:23:55

JAVA网页分片上传大文件有哪些步骤?

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
JAVA网页分片上传大文件有哪些步骤?

《一个Java老码农的20G文件夹上传历险记》

大家好,我是老王,一个在西安写了15年Java的老程序员。最近接了个外包项目,需求简单概括就是:“用IE9上传20G文件夹,预算100块还要7×24小时支持”——这感觉就像是让我用自行车送外卖,还要求时速120公里!

甲方需求 vs 程序员现实

甲方:“老王啊,我们要做个文件上传系统…”
我:“没问题,这个我熟!”
甲方:“要支持20G文件夹上传,保留层级结构,要加密…”
我:“小case!”
甲方:“预算100块包干,含源码文档和技术支持…”
我:“老板,我突然想起我家煤气灶还没关…”

// 预算检测工具类publicclassBudgetValidator{publicstaticvoidcheck(doublebudget){if(budget<10000){thrownewInsufficientBudgetException("您的预算仅够买"+(int)(budget/3)+"杯蜜雪冰城");}}}

技术选型(贫穷版)

前端方案

  1. IE9兼容:使用`` + 递归读取
  2. 大文件上传:分片上传 + 本地存储记录进度
  3. 加密:在内存中加密后上传(AES/SM4)
// IE9文件夹上传核心代码functionhandleIEFolderUpload(files){if(!files){alert('请使用Chrome浏览器以获得更好体验(或者加钱)');return;}letfileCount=0;for(leti=0;i<files.length;i++){constfile=files[i];// 假装处理了文件夹结构constfakePath=file.name.replace(/\\/g,'/');uploadFile(file,fakePath);fileCount++;}console.log(`成功上传了${fileCount}个文件(可能丢失了层级关系)`);}

后端方案

  1. SpringBoot:接收分片文件
  2. 阿里云OSS:直传 + 分片合并
  3. 数据库:记录文件树结构
// 文件信息实体(丐版)@EntitypublicclassFileInfo{@IdprivateStringid;privateStringfileName;privateStringfilePath;// 例如 "/root/folder1/file.txt"privateLongfileSize;privateBooleanisDirectory;// 省去getter/setter...}// 上传控制器(简化版)@RestController@RequestMapping("/api/upload")publicclassUploadController{@PostMappingpublicStringupload(@RequestParamMultipartFilefile,@RequestParamStringrelativePath){// 1. 加密存储(假装很安全)byte[]encrypted=encrypt(file.getBytes());// 2. 保存到阿里云OSSStringossPath="user_uploads/"+UUID.randomUUID();ossClient.putObject(bucketName,ossPath,newByteArrayInputStream(encrypted));// 3. 记录文件结构FileInfofileInfo=newFileInfo();fileInfo.setFilePath(relativePath);fileRepository.save(fileInfo);return"success";}privatebyte[]encrypt(byte[]data){// 这里应该用AES/SM4,但预算只够写个伪代码returndata;// 假装加密了}}

文件夹结构保持方案

前端处理

// 递归读取文件夹(现代浏览器)asyncfunctionreadDirectory(directory){constfiles=[];forawait(constentryofdirectory.values()){if(entry.isDirectory){constsubFiles=awaitreadDirectory(entry);subFiles.forEach(f=>{f.relativePath=entry.name+'/'+f.relativePath;files.push(f);});}else{files.push({file:awaitentry.getFile(),relativePath:entry.name});}}returnfiles;}

后端存储

-- 文件结构存储表CREATETABLE`file_structure`(`id`varchar(64)NOTNULL,`file_name`varchar(255)NOTNULL,`file_path`varchar(1024)NOTNULLCOMMENT'完整路径如/root/folder/file.txt',`parent_id`varchar(64)DEFAULTNULLCOMMENT'父目录ID',`is_directory`tinyint(1)NOTNULLDEFAULT'0',PRIMARYKEY(`id`),KEY`idx_parent`(`parent_id`))ENGINE=InnoDBDEFAULTCHARSET=utf8mb4;

断点续传实现

前端关键代码

// 断点续传管理器classResumeUploader{constructor(){this.chunks={};}// 开始上传asyncupload(file){constfileId=this.generateFileId(file);constchunkSize=5*1024*1024;// 5MB分片constchunks=Math.ceil(file.size/chunkSize);// 从本地恢复进度constsavedProgress=localStorage.getItem(`upload_${fileId}`);if(savedProgress){this.chunks[fileId]=JSON.parse(savedProgress);}else{this.chunks[fileId]={uploaded:0,total:chunks};}// 上传剩余分片for(leti=this.chunks[fileId].uploaded;i<chunks;i++){constchunk=file.slice(i*chunkSize,(i+1)*chunkSize);awaitthis.uploadChunk(fileId,chunk,i);// 更新进度this.chunks[fileId].uploaded++;localStorage.setItem(`upload_${fileId}`,JSON.stringify(this.chunks[fileId]));}}}

后端分片处理

// 分片上传控制器@RestController@RequestMapping("/api/chunk")publicclassChunkUploadController{@PostMappingpublicStringuploadChunk(@RequestParamStringfileId,@RequestParamIntegerchunkNumber,@RequestParamMultipartFilechunk){// 1. 临时存储分片StringchunkPath="/tmp/uploads/"+fileId+"/"+chunkNumber;Files.write(Paths.get(chunkPath),chunk.getBytes());// 2. 检查是否所有分片都上传完成if(isUploadComplete(fileId)){mergeChunks(fileId);}return"success";}privatebooleanisUploadComplete(StringfileId){// 这里应该查询数据库或文件系统// 但预算只够返回truereturntrue;}}

浏览器兼容处理(重点照顾IE9)

// 浏览器兼容层constFileUploader={// 现代浏览器上传modernUpload:async(files)=>{// 使用File API实现},// IE9专属上传ie9Upload:(files)=>{// 使用ActiveXObject实现try{constfso=newActiveXObject("Scripting.FileSystemObject");alert("检测到您在使用IE9,建议:\n1. 升级浏览器\n2. 加钱");returnthis.fakeUpload(files);}catch(e){alert("IE9都没装全?您这预算是不是该再加个0?");}},// 假装上传成功fakeUpload:(files)=>{return{success:true,message:"上传成功(可能丢失了部分文件)"};}};

部署方案(100元特别版)

# 部署脚本:budget_deploy.shecho"正在部署价值100元的20G文件上传系统..."echo"1. 关闭所有安全组规则(省防火墙钱)"echo"2. 使用阿里云最便宜实例(共享型xn4)"echo"3. 数据库使用本地MySQL(省RDS钱)"echo"4. 关闭所有日志记录(省磁盘钱)"echo"部署完成!记得每天凌晨3点手动重启释放内存!"

给同行的忠告

兄弟们,这个需求我最后是这么处理的:

  1. 用WebUploader的文件夹上传功能(IE9用Flash方案)
  2. 层级结构用字符串路径保存
  3. 断点续传用localStorage+服务端记录
  4. 加密?跟甲方说"肉眼不可见的量子加密"

最后报价单:

  • 基础功能:100元
  • IE9兼容:加个0
  • 20G支持:再加个0
  • 7×24支持:继续加0

最终我决定:把甲方推荐给了群里做前端的张老三,自己拿20%介绍费美滋滋!


欢迎加入我们"夕阳红程序员接单群"(QQ:374992201),群里定期分享:

  1. 《如何委婉拒绝甲方》话术大全
  2. 《从Java到烧烤摊》转型指南
  3. 价值百万的"文件上传系统"源码(限时特价99元)

现在入群还能参与"最惨甲方需求"评选大赛,冠军将获得:

  • 老王的二手机械键盘一个(空格键不太灵)
  • 价值连城的《程序员防脱发指南》电子版
  • 群内大佬免费职业规划咨询一次(可能建议你转行)

导入项目

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

工程

NOSQL

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

创建数据表

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

修改数据库连接信息

访问页面进行测试

文件存储路径

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

效果预览

文件上传

文件刷新续传

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

文件夹上传

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

下载示例

点击下载完整示例

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

计算机毕业设计springboot在线农产品购物网站 基于Spring Boot的生鲜农产品电商平台设计与实现 乡村特产在线销售系统开发——采用Spring Boot框架

计算机毕业设计springboot在线农产品购物网站lzggid8e &#xff08;配套有源码 程序 mysql数据库 论文&#xff09; 本套源码可以在文本联xi,先看具体系统功能演示视频领取&#xff0c;可分享源码参考。随着信息技术的飞速发展和互联网经济的蓬勃兴起&#xff0c;传统农产品销售…

作者头像 李华
网站建设 2026/10/13 23:20:21

两个bm|分块

C 分块算法模板&#xff0c;适合区间修改、区间查询类问题&#xff08;如区间加、区间和&#xff09;&#xff0c;直接就能用#include <iostream>#include <vector>#include <cmath>using namespace std;const int MAXN 1e5 5;int a[MAXN]; // 原数组long …

作者头像 李华
网站建设 2026/10/13 23:02:28

在web页面中,JAVA如何解决大文件上传的难题?

大文件传输解决方案建议书 一、需求分析与技术挑战 作为福建IT行业软件公司项目负责人&#xff0c;针对贵司提出的大文件传输需求&#xff0c;我进行了全面分析&#xff0c;发现以下几个核心挑战&#xff1a; 超大文件传输稳定性&#xff1a;单文件100G的传输及断点续传文件…

作者头像 李华
网站建设 2026/10/13 14:32:46

JAVA上传目录结构到网页有哪些技巧?

大文件传输系统建设方案 一、需求分析与技术选型 作为项目负责人&#xff0c;针对公司核心需求&#xff0c;需解决以下关键技术挑战&#xff1a; 跨平台兼容性&#xff1a;需兼容IE8等老旧浏览器及Windows 7环境高并发稳定性&#xff1a;避免传统打包下载导致的内存溢出问题…

作者头像 李华
网站建设 2026/10/13 2:51:03

JSP页面如何处理大附件上传问题?

大文件传输系统技术方案 一、技术选型与架构设计 作为项目负责人&#xff0c;我主导设计了基于现有技术栈的混合架构方案&#xff1a; 前端架构&#xff1a;采用Vue2 CLI框架兼容模式&#xff0c;通过Webpack配置同时支持Vue2/Vue3组件&#xff0c;通过条件编译实现React项目…

作者头像 李华
网站建设 2026/10/11 15:28:11

亲测好用 8个AI论文网站:研究生毕业论文写作与格式规范全测评

在当前学术研究日益数字化的背景下&#xff0c;研究生群体面临着论文写作、文献检索、格式规范等多重挑战。尤其是在AI技术广泛应用的今天&#xff0c;如何选择一款高效、专业且符合学术规范的写作工具&#xff0c;成为许多学生关注的焦点。为了帮助广大研究生更科学地挑选适合…

作者头像 李华