news 2026/1/10 14:15:51

前端如何通过JavaScript实现Java大文件分片上传的进度监控?

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
前端如何通过JavaScript实现Java大文件分片上传的进度监控?

大文件传输系统建设方案(技术方案与代码示例)

一、项目背景与核心需求

作为公司项目负责人,针对产品部门提出的100G级大文件传输需求,需构建一套高兼容性、高稳定性、全浏览器支持的解决方案。核心需求如下:

  1. 功能需求

    • 单文件100G+传输,支持文件夹层级结构保留
    • 断点续传(浏览器刷新/关闭后进度不丢失)
    • 非打包下载(支持10万+文件并发下载)
    • 加密传输(SM4/AES可配置)与自动解密下载
  2. 兼容性需求

    • 浏览器:IE8+、Chrome、Firefox、360安全浏览器
    • 操作系统:Windows 7/10、macOS、Linux(CentOS/RedHat)
    • 后端:JSP(现有系统)+ Spring Boot(新项目)
    • 前端:Vue2/Vue3/React(通过微前端集成)
  3. 部署与成本需求

    • 阿里云ECS+OSS私有云部署
    • 预算≤98万买断源代码授权
    • 供应商需提供5个国企合作证明材料
二、技术架构设计
1.分层架构
┌───────────────┐ ┌───────────────┐ ┌───────────────┐ │ 浏览器端 │ │ 应用服务器 │ │ 存储层 │ │ (IE8/Vue2) │←──→│ (JSP/Spring) │←──→│ (阿里云OSS) │ └───────────────┘ └───────────────┘ └───────────────┘ ↑ ↑ ↑ │ 分片上传组件 │ 加密控制模块 │ 对象存储适配器 │ │ 进度持久化 │ 算法切换服务 │ 多云存储路由 │
2.关键技术选型
  • 分片传输:自定义协议(兼容IE8的XMLHttpRequest Level 2)
  • 进度持久化
    • 现代浏览器:IndexedDB
    • IE8:UserData对象(通过Flash插件增强)
  • 加密方案
    • 传输层:TLS 1.2 + SM4-CBC(国密SSL证书)
    • 存储层:AES-256-GCM(阿里云KMS集成)
三、核心功能实现
1.文件夹层级传输(非打包方案)

前端实现(Vue2示例)

// 递归处理文件夹结构classFolderUploader{constructor(folderPath){this.folderPath=folderPath;this.fileTree=[];}asyncscanFolder(){constentries=awaitthis.readDirectory(this.folderPath);for(constentryofentries){constfullPath=`${this.folderPath}/${entry.name}`;if(entry.isDirectory){constsubTree=newFolderUploader(fullPath);awaitsubTree.scanFolder();this.fileTree.push({type:'directory',name:entry.name,children:subTree.fileTree});}else{this.fileTree.push({type:'file',name:entry.name,path:fullPath,size:entry.size});}}}// IE8兼容的目录读取(通过ActiveXObject)readDirectory(path){returnnewPromise((resolve)=>{if(window.ActiveXObject){constfso=newActiveXObject("Scripting.FileSystemObject");constfolder=fso.GetFolder(path);constentries=[];conste=newEnumerator(folder.Files);for(;!e.atEnd();e.moveNext()){entries.push({name:e.item().Name,size:e.item().Size,isDirectory:false});}// 类似处理子目录...resolve(entries);}else{// 现代浏览器使用File System Access APIresolve([]);}});}}

后端实现(JSP示例)

<%-- 文件分片接收接口 --%> <%@ page import="com.aliyun.oss.OSSClient" %> <%@ page import="com.aliyun.oss.model.ObjectMetadata" %> <% String fileId = request.getParameter("fileId"); int chunkNumber = Integer.parseInt(request.getParameter("chunk")); String tempPath = "/tmp/upload/" + fileId; // 保存分片到本地临时目录 try (InputStream is = request.getInputStream(); FileOutputStream os = new FileOutputStream(tempPath + "-" + chunkNumber)) { byte[] buffer = new byte[4096]; int bytesRead; while ((bytesRead = is.read(buffer)) != -1) { os.write(buffer, 0, bytesRead); } } // 记录已上传分片(使用Redis持久化) Jedis jedis = new Jedis("localhost"); jedis.sadd("upload:" + fileId, String.valueOf(chunkNumber)); %>
2.断点续传持久化

IE8兼容方案

// 使用Flash的SharedObject实现本地存储functionsaveProgressIE8(fileId,chunks){try{varflash=document.getElementById("storageFlash");flash.setData(fileId,JSON.stringify(chunks));}catch(e){// 降级方案:通过Cookie存储(仅支持4KB)document.cookie=`progress_${fileId}=${JSON.stringify(chunks).substring(0,4000)}`;}}
3.加密传输与存储

SM4加密工具类(JSP端)

// SM4加密工具类(需引入Bouncy Castle)publicclassSm4Util{privatestaticfinalStringALGORITHM="SM4/ECB/PKCS5Padding";publicstaticbyte[]encrypt(byte[]data,byte[]key)throwsException{Security.addProvider(newBouncyCastleProvider());SecretKeySpeckeySpec=newSecretKeySpec(key,"SM4");Ciphercipher=Cipher.getInstance(ALGORITHM,"BC");cipher.init(Cipher.ENCRYPT_MODE,keySpec);returncipher.doFinal(data);}// 阿里云OSS上传前加密publicstaticvoiduploadWithEncryption(OSSClientossClient,StringbucketName,StringobjectKey,Filefile){try(InputStreamis=newFileInputStream(file)){byte[]key="1234567890abcdef".getBytes();// 实际应从KMS获取byte[]encrypted=Sm4Util.encrypt(IOUtils.toByteArray(is),key);ObjectMetadatametadata=newObjectMetadata();metadata.setContentLength(encrypted.length);metadata.addUserMetadata("x-oss-meta-algorithm","SM4");ossClient.putObject(bucketName,objectKey,newByteArrayInputStream(encrypted),metadata);}catch(Exceptione){thrownewRuntimeException("加密上传失败",e);}}}
四、兼容性保障方案
1.浏览器兼容矩阵
浏览器核心方案回退方案
IE8Flash+ActiveX控件纯HTTP分块上传
Chrome/FirefoxWeb Worker多线程Fetch API
360浏览器兼容模式检测强制使用Chrome内核
2.操作系统适配
  • Windows 7
    • 禁用TLS 1.3,强制使用TLS 1.2
    • 安装.NET Framework 3.5 SP1(ActiveX依赖)
  • Linux
    • 提供RPM/DEB安装包
    • 预装libgcrypt(SM4算法依赖)
五、供应商评估标准
  1. 资质要求

    • 提供5个国企项目合同(需包含金融/政府客户)
    • 阿里云技术认证合作伙伴资质
    • SM4算法商用密码产品认证
  2. 交付物清单

    • 完整源代码(含JSP标签库)
    • IE8兼容性测试报告
    • 100G文件传输压力测试数据
六、项目实施计划
  1. POC验证阶段(3周)

    • 在阿里云ECS搭建测试环境
    • 完成IE8/CentOS/MySQL兼容性验证
  2. 核心功能开发(6周)

    • 实现分片上传/下载基础框架
    • 完成SM4加密传输模块
  3. 兼容性适配阶段(4周)

    • 适配360浏览器/统信UOS
    • 通过等保2.0二级安全测评
七、风险控制
  1. IE8兼容风险

    • 预留15%预算用于采购第三方兼容性组件(如TinyMCE的IE补丁)
  2. 性能瓶颈风险

    • 在阿里云部署SLB负载均衡
    • 采用OSS多副本存储策略提升下载速度

本方案通过模块化设计,可快速集成到公司200+现有项目中,预计降低70%以上重复开发成本。建议优先选择具有金融项目实施经验的供应商(如科蓝软件、长亮科技等),确保系统稳定性达到99.99%可用性要求。

导入项目

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

工程

NOSQL

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

创建数据表

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

修改数据库连接信息

访问页面进行测试

文件存储路径

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

效果预览

文件上传

文件刷新续传

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

文件夹上传

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

批量下载

支持文件批量下载

下载续传

文件下载支持离线保存进度信息,刷新页面,关闭页面,重启系统均不会丢失进度信息。

文件夹下载

支持下载文件夹,并保留层级结构,不打包,不占用服务器资源。

下载示例

点击下载完整示例

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

为什么顶尖团队都在用AutoGLM?:深度拆解其工程化落地的4大优势

第一章&#xff1a;智普Open-AutoGLM 沉思在人工智能与自动化深度融合的当下&#xff0c;智普推出的 Open-AutoGLM 项目为大语言模型的自主任务执行开辟了新路径。它不仅继承了 GLM 系列模型强大的语义理解能力&#xff0c;更通过可编程接口实现了任务规划、工具调用与反馈闭环…

作者头像 李华
网站建设 2025/12/24 12:14:29

React表单与事件处理:编辑按钮触发提交的坑

在React应用开发中,表单处理和事件处理是常见的操作,开发者常常会遇到一些看似简单但却让人困惑的问题。今天,我们来探讨一个常见的问题:为什么点击编辑按钮会触发表单的提交事件?让我们通过一个实例来详细分析这个问题,并提供解决方案。 问题背景 假设我们有一个用户数…

作者头像 李华
网站建设 2025/12/24 12:14:03

GPT-SoVITS在语音导航系统中的定制化实现

GPT-SoVITS在语音导航系统中的定制化实现 在智能座舱日益成为汽车“第二生活空间”的今天&#xff0c;用户对车载交互体验的期待早已超越基础功能。尤其是在长途驾驶中&#xff0c;一段亲切、自然甚至带有熟悉音色的导航提示&#xff0c;不仅能提升安全性&#xff0c;还能缓解疲…

作者头像 李华
网站建设 2025/12/31 2:32:49

高效刷题指南:如何用好vijos在线评测系统备战竞赛

在信息学竞赛的备赛过程中&#xff0c;一个稳定、高效的在线评测系统&#xff08;OJ&#xff09;至关重要。它不仅提供了海量的题库资源&#xff0c;更是检验算法实现正确性与代码效率的核心平台。对于众多算法学习者而言&#xff0c;熟练使用一个优秀的OJ&#xff0c;是提升实…

作者头像 李华
网站建设 2026/1/6 12:57:24

从入门到精通:Open-AutoGLM环境搭建与推理部署全流程解析

第一章&#xff1a;Open-AutoGLM 安装使用环境准备 在开始安装 Open-AutoGLM 之前&#xff0c;确保系统已配置 Python 3.9 或更高版本&#xff0c;并推荐使用虚拟环境以隔离依赖。可通过以下命令创建并激活虚拟环境&#xff1a;# 创建虚拟环境 python -m venv open-autoglm-env…

作者头像 李华
网站建设 2025/12/27 9:32:34

还在为大模型部署发愁?,Open-AutoGLM安装实战经验全分享

第一章&#xff1a;Open-AutoGLM简介与核心价值Open-AutoGLM 是一个面向自动化自然语言处理任务的开源框架&#xff0c;专为提升大语言模型在实际业务场景中的推理效率与执行准确性而设计。该框架融合了提示工程、思维链&#xff08;Chain-of-Thought&#xff09;优化与动态任务…

作者头像 李华