当前位置：首页 > news >正文

保险网页项目怎么用javascript实现大文件分片上传及断点续传源码？

news 2026/4/3 6:05:32

大文件传输系统技术方案设计

项目背景与需求分析

作为北京XX软件公司的项目负责人，近期产品部门提出了大文件传输系统的需求。经过与各业务部门的需求沟通和技术评估，我们面临以下核心挑战：

超大文件处理：需支持50GB以上文件的稳定传输
复杂文件夹结构：要求保留完整的层级结构，支持数万文件的目录树
高稳定性断点续传：需在浏览器关闭、系统重启后仍能恢复进度
多平台兼容：需兼容包括IE8在内的主流浏览器及三大操作系统
安全合规：需支持国密SM4及AES加密算法，满足等保要求

技术选型与架构设计

整体架构

┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ 客户端 │ │ 应用服务器 │ │ 阿里云OSS │ │ (Vue2+原生JS)├───►│ (JSP+Java) ├───►│ (加密存储) │ └─────────────┘ └─────────────┘ └─────────────┘ ▲ ▲ ▲ │ │ │ ┌──────┴──────┐ ┌───────┴───────┐ ┌───────┴───────┐ │ 本地存储 │ │ MySQL数据库 │ │ 文件元数据 │ │ (断点信息) │ │ (传输记录) │ │ (目录结构) │ └─────────────┘ └───────────────┘ └───────────────┘

关键技术方案

前端上传组件：基于Vue2封装，核心功能采用原生JS实现，确保IE8兼容性
文件夹结构处理：通过递归算法解析目录树，保留完整路径信息
断点续传机制：客户端持久化分片信息，服务端校验机制保障数据完整性
加密传输：支持SM4/AES动态切换，前端加密后传输，服务端直接存储密文
非打包下载：基于OSS预签名URL实现直下，减轻服务器压力

核心代码实现

前端文件夹上传处理

// 文件夹选择处理 - 兼容IE8与其他浏览器functionhandleFolderSelect(event){constinput=event.target;if(typeofinput.webkitdirectory!=='undefined'){// 现代浏览器处理processWebkitDirectory(input.files);}else{// IE8降级方案launchLegacyFolderUploader();}}// 递归处理webkit目录结构functionprocessWebkitDirectory(files){constfolderMap={};Array.from(files).forEach(file=>{constpath=file.webkitRelativePath;constparts=path.split('/');letcurrentLevel=folderMap;// 构建目录树结构for(leti=0;i<parts.length-1;i++){constpart=parts[i];if(!currentLevel[part]){currentLevel[part]={_files:[]};}currentLevel=currentLevel[part];}file.relativePath=path;currentLevel._files.push(file);});// 开始上传目录结构uploadFolderStructure(folderMap);}

后端JSP分片处理接口

<%@ pageimport="com.xxx.upload.*, javax.servlet.*"%><%// 分片上传处理Servletresponse.setContentType("application/json");FileUploadServiceuploadService=FileUploadService.getInstance();try{Stringaction=request.getParameter("action");StringfileId=request.getParameter("fileId");intchunk=Integer.parseInt(request.getParameter("chunk"));intchunks=Integer.parseInt(request.getParameter("chunks"));StringrelativePath=request.getParameter("relativePath");PartfilePart=request.getPart("file");InputStreamfileContent=filePart.getInputStream();// 处理加密StringencryptType=request.getParameter("encryptType");byte[]encryptedData=EncryptUtil.encrypt(IOUtils.toByteArray(fileContent),encryptType);// 存储分片UploadResultresult=uploadService.saveChunk(fileId,chunk,chunks,relativePath,encryptedData);out.print(JsonUtil.toJson(result));}catch(Exceptione){response.setStatus(500);out.print(JsonUtil.toJson(newErrorResult(e.getMessage())));}%>

数据库设计（MySQL）

-- 文件上传记录表CREATETABLE`t_file_upload`(`id`varchar(64)NOTNULLCOMMENT'文件ID',`file_name`varchar(255)NOTNULLCOMMENT'文件名',`relative_path`varchar(1024)DEFAULTNULLCOMMENT'相对路径',`file_size`bigint(20)NOTNULLCOMMENT'文件大小',`chunk_size`int(11)NOTNULLCOMMENT'分片大小',`total_chunks`int(11)NOTNULLCOMMENT'总分片数',`completed_chunks`textCOMMENT'已完成分片',`encrypt_type`enum('SM4','AES')NOTNULLCOMMENT'加密类型',`status`tinyint(4)NOTNULLDEFAULT'0'COMMENT'状态',`create_time`datetimeNOTNULLCOMMENT'创建时间',`update_time`datetimeNOTNULLCOMMENT'更新时间',PRIMARYKEY(`id`),KEY`idx_status`(`status`))ENGINE=InnoDBDEFAULTCHARSET=utf8mb4COMMENT='文件上传记录';-- 文件下载记录表CREATETABLE`t_file_download`(`id`varchar(64)NOTNULLCOMMENT'下载ID',`file_ids`textNOTNULLCOMMENT'文件ID集合',`download_type`enum('FILE','FOLDER')NOTNULLCOMMENT'下载类型',`status`tinyint(4)NOTNULLDEFAULT'0'COMMENT'状态',`create_time`datetimeNOTNULLCOMMENT'创建时间',`complete_time`datetimeDEFAULTNULLCOMMENT'完成时间',PRIMARYKEY(`id`))ENGINE=InnoDBDEFAULTCHARSET=utf8mb4COMMENT='文件下载记录';

IE8兼容方案

针对Windows 7+IE8环境，我们设计了分层的兼容方案：

ActiveX上传控件：封装了一个轻量级的ActiveX控件，提供基础文件选择功能
Flash分片上传：使用SWFUpload实现分片上传能力
本地存储方案：利用IE的userData行为持久化上传进度

// IE8兼容检测与初始化functioninitIE8Uploader(){if(!window.FileReader){// 加载ActiveX控件try{varuploader=newActiveXObject("XUploader.Control");uploader.onFileSelected=function(files){processIEFiles(files);};document.getElementById("ie8Uploader").appendChild(uploader);}catch(e){alert("请安装上传组件控件");}}}// IE8文件处理functionprocessIEFiles(files){// 模拟目录结构处理varvirtualFolder={name:"IE8_Upload",_files:[]};for(vari=0;i<files.count;i++){varfile=files.item(i);file.relativePath=virtualFolder.name+"/"+file.name;virtualFolder._files.push(file);}uploadFolderStructure(virtualFolder);}

性能优化方案

OSS直传优化：
- 前端获取OSS STS临时凭证后直接上传至OSS
- 服务端仅记录元数据，不参与文件传输

内存控制：

// JSP上传配置调整@MultipartConfig(maxFileSize=524288000L,// 500MBmaxRequestSize=524288000L,// 500MBfileSizeThreshold=1048576// 1MB)publicclassUploadServletextendsHttpServlet{// ...}

下载限流机制：

-- 下载频率控制表CREATETABLE`t_download_limit`(`user_id`varchar(64)NOTNULL,`last_time`datetimeNOTNULL,`token_bucket`int(11)NOTNULLDEFAULT'10',PRIMARYKEY(`user_id`));