news 2026/5/4 8:54:37

央企网页应用中,JAVA如何支持多附件的分块上传?

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
央企网页应用中,JAVA如何支持多附件的分块上传?

“救命啊!毕业设计要翻车了!”

作为福州某高校计算机系最会摸鱼的大三咸鱼,最近被毕业设计逼得差点把键盘啃了。导师让我做个文件管理系统,要求支持10G大文件上传、断点续传、文件夹层级保留、全浏览器兼容…最要命的是必须用原生JS实现(Vue3:你礼貌吗?)。


第一章:前端の渡劫

WebUploader改造记

// 魔改后的WebUploader核心代码(兼容IE8的Blob切片)functionIE8CompatibleSlice(file,start,end){if(window.FileReader&&window.Blob.prototype.slice){returnfile.slice(start,end);}// IE8特供版:用Flash模拟切片(别问,问就是玄学)returnflashSlicer.slice(file,start,end);}// 兼容所有浏览器的MD5计算(包括IE6)functioncalculateMD5(fileChunk){if(window.crypto&&window.crypto.subtle){returncrypto.subtle.digest('SHA-256',fileChunk);}// 兼容IE的ActiveX方案try{varxml=newActiveXObject("Microsoft.XMLDOM");// ...此处省略500行兼容代码}catch(e){alert('您使用的浏览器可能来自上个世纪,建议升级到IE9+');}}

文件夹上传黑科技

// 递归读取文件夹(兼容IE10以下)functionreadFolderIECompatible(entry,callback){if(entry.isFile){entry.file(function(file){callback([file]);});}else{vardirReader=entry.createReader();dirReader.readEntries(function(entries){varfiles=[];for(vari=0;i<entries.length;i++){readFolderIECompatible(entries[i],function(subFiles){files=files.concat(subFiles);});}callback(files);// 异步地狱警告!});}}

第二章:后端の受难

SpringBoot控制器(防IE8攻击版)

@RestController@RequestMapping("/upload")publicclassUploadController{@PostMapping("/chunk")publicResponseEntityuploadChunk(@RequestParam("file")MultipartFilefile,@RequestParam("chunkNumber")intchunkNumber,@RequestParam("totalChunks")inttotalChunks,@RequestParam("identifier")Stringidentifier,// 兼容IE8的奇怪参数名@RequestParam(value="fileName",required=false)Stringie8FileName){try{// 文件存储路径(直接塞服务器硬盘)Stringpath="/var/uploads/"+identifier+"/"+chunkNumber;// 防IE8乱码文件名处理StringfileName=ie8FileName!=null?newString(ie8FileName.getBytes("ISO-8859-1"),"UTF-8"):file.getOriginalFilename();// 保存分片(省略异常处理)Files.write(Paths.get(path),file.getBytes());returnResponseEntity.ok("分片"+chunkNumber+"接收成功");}catch(Exceptione){returnResponseEntity.status(500).body("IE8又出幺蛾子了:"+e.getMessage());}}}

MySQL断点续传表设计

CREATETABLE`upload_progress`(`id`bigint(20)NOTNULLAUTO_INCREMENT,`file_id`varchar(64)NOTNULLCOMMENT'文件唯一标识',`chunk_number`int(11)NOTNULLCOMMENT'已上传分片序号',`total_chunks`int(11)DEFAULTNULLCOMMENT'总分片数',`browser_type`varchar(50)DEFAULTNULLCOMMENT'检测到的浏览器类型',`last_update`timestampNOTNULLDEFAULTCURRENT_TIMESTAMPONUPDATECURRENT_TIMESTAMP,PRIMARYKEY(`id`),UNIQUEKEY`idx_file_id`(`file_id`))ENGINE=InnoDBDEFAULTCHARSET=utf8mb4COMMENT='兼容IE8的上传进度表';

第三章:兼容性の炼狱

IE8专属补丁包

// 检测是否为IE8(最可靠的检测方式)functionisIE8(){return!!document.all&&!document.addEventListener&&window.XMLHttpRequest&&!window.XDomainRequest;}// IE8专用AJAX实现functionie8Ajax(url,data,callback){varxhr=newActiveXObject("Microsoft.XMLHTTP");xhr.onreadystatechange=function(){if(xhr.readyState==4){callback(xhr.responseText);}};xhr.open("POST",url,true);xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");xhr.send(data);}

第四章:生存指南

  1. 测试矩阵

    • IE8/9 + Windows 7
    • Chrome 45(某国企指定浏览器)
    • 龙芯浏览器(在虚拟机里跑)
    • 奇安信浏览器(需要企业账号)
  2. 必备工具

    • IE Tester(模拟IE6-11)
    • Postman(测试API)
    • 速效救心丸(测试IE8时必备)
  3. 求职彩蛋

    // 在控制台输入这个可以查看隐藏的求职信息console.log("%c福州IT公司招聘啦!","color: red; font-size: 24px;");console.log("联系QQ:374992201(加群领红包+内推)");

最终生存建议

  1. 千万别在IE8上测试加密功能(会让你怀疑人生)
  2. 文件夹上传功能建议用Flash作为备用方案(是的,2023年还在用Flash)
  3. 遇到问题赶紧加群:374992201(群主会发红包安抚你)
  4. 毕业设计演示前记得备份三份(分别存在U盘、网盘和邮箱)

(附:本代码已在IE8/Chrome/Firefox/龙芯浏览器上成功跑通,但不对任何生产环境问题负责,毕竟我连毕业设计能不能过都不知道…)

SQL示例

创建数据库

配置数据库连接

自动下载maven依赖

启动项目

启动成功

访问及测试

默认页面接口定义

在浏览器中访问

数据表中的数据

效果预览

文件上传

文件刷新续传

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

文件夹上传

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

示例下载

下载完整示例

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

通义千问3-14B显存峰值高?流式输出优化部署案例

通义千问3-14B显存峰值高&#xff1f;流式输出优化部署案例 1. 为什么你的Qwen3-14B显存爆了&#xff1f; 你有没有遇到这种情况&#xff1a;明明RTX 4090有24GB显存&#xff0c;加载一个FP8量化后才14GB的Qwen3-14B模型&#xff0c;结果一跑就OOM&#xff08;Out of Memory&…

作者头像 李华
网站建设 2026/4/25 19:59:59

手把手教你部署GPT-OSS-20B,网页端玩转开源大模型

手把手教你部署GPT-OSS-20B&#xff0c;网页端玩转开源大模型 你是否也曾在深夜翻遍GitHub&#xff0c;只为找到一个能在本地运行、又足够聪明的开源大模型&#xff1f;现在&#xff0c;这个愿望终于可以实现了。今天我们要聊的是 GPT-OSS-20B —— 一个社区重构的高性能语言模…

作者头像 李华
网站建设 2026/4/18 22:14:40

用Qwen-Image-Layered做了个AI修图工具,效果超出预期

用Qwen-Image-Layered做了个AI修图工具&#xff0c;效果超出预期 最近在尝试一个非常有意思的图像处理镜像——Qwen-Image-Layered。它最让我惊艳的地方&#xff0c;是能把一张普通图片自动拆解成多个RGBA图层&#xff0c;每个图层都对应画面中的不同元素。这意味着你可以像在…

作者头像 李华
网站建设 2026/4/29 16:38:29

通义千问3-14B推理中断?长上下文稳定运行部署教程

通义千问3-14B推理中断&#xff1f;长上下文稳定运行部署教程 1. 为什么Qwen3-14B常在长文本推理中“卡住”——不是模型不行&#xff0c;是环境没配对 你是不是也遇到过&#xff1a;加载Qwen3-14B后&#xff0c;输入一段20万字的PDF摘要&#xff0c;模型刚吐出几行就静默、显…

作者头像 李华
网站建设 2026/4/29 16:38:28

Z-Image-Turbo省钱方案:消费级显卡运行高质量文生图实战指南

Z-Image-Turbo省钱方案&#xff1a;消费级显卡运行高质量文生图实战指南 Z-Image-Turbo是阿里巴巴通义实验室开源的高效AI图像生成模型&#xff0c;作为Z-Image的蒸馏版本&#xff0c;它在保持照片级画质的同时大幅降低了计算需求。该模型仅需8步即可完成高质量图像生成&#…

作者头像 李华