保险网页项目怎么用javascript实现文件夹上传及加密？

大文件传输解决方案技术方案

作为陕西某软件公司项目负责人，针对公司产品部门提出的大文件传输需求，我经过深入调研和技术评估，提出以下专业解决方案。

一、需求分析与技术挑战

核心需求

支持50G以上大文件传输，包含文件/文件夹上传下载
断点续传功能需具备高稳定性(浏览器刷新/关闭不丢失进度)
文件夹传输需保留完整层级结构
非打包方式下载(避免服务器内存问题)
跨平台支持(Windows/macOS/Linux)和浏览器兼容(含IE8)
与现有技术栈无缝集成(JSP/Vue2/MySQL/阿里云OSS)
支持私有化部署和公网部署

技术难点

传统开源组件(如WebUploader)已无法满足需求
文件夹层级结构保持技术实现复杂
非打包下载对服务器IO压力管理
IE8兼容性处理
断点续传的状态持久化存储

二、技术选型与架构设计

整体架构

[客户端(Vue2)] ——HTTP/WebSocket——> [Nginx反向代理] | [应用服务器(JSP)] ——> [文件分片服务] ——> [阿里云OSS] | [MySQL] <—— [传输状态管理服务] <—— [断点续传控制]

核心技术组件

前端上传组件: 基于Vue2的自适应上传组件，支持IE8降级方案
文件分片服务: 采用256KB~4MB动态分片策略
断点续传服务: 基于Redis+MySQL的混合存储方案
文件夹处理引擎: 递归扫描+相对路径映射
下载服务: 直接OSS链接+签名授权

三、关键代码实现

前端部分(Vue2)

// FileUploader.vueexportdefault{data(){return{fileList:[],folderList:[],uploadStatus:{}}},methods:{// 处理文件夹选择handleFolderSelect(e){constitems=e.dataTransfer?.items||e.target.files;this.scanFolder(items).then(tree=>{this.folderList=tree;});},// 递归扫描文件夹asyncscanFolder(items,path=''){consttree=[];for(leti=0;i<items.length;i++){constitem=items[i];if(item.isFile){constfile=awaitnewPromise(resolve=>item.getAsFile(resolve));file.relativePath=path+file.name;tree.push(file);}elseif(item.isDirectory){constdirReader=item.createReader();constentries=awaitnewPromise(resolve=>dirReader.readEntries(resolve));constchildren=awaitthis.scanFolder(entries,path+item.name+'/');tree.push(...children);}}returntree;},// 分片上传asyncuploadFile(file,chunkSize=4*1024*1024){constfileId=this.generateFileId(file);consttotalChunks=Math.ceil(file.size/chunkSize);// 检查已上传分片const{uploadedChunks}=awaitthis.$http.get(`/api/upload/status?fileId=${fileId}`);for(leti=0;i<totalChunks;i++){if(uploadedChunks.includes(i))continue;constchunk=file.slice(i*chunkSize,(i+1)*chunkSize);constformData=newFormData();formData.append('file',chunk);formData.append('chunkIndex',i);formData.append('totalChunks',totalChunks);formData.append('fileId',fileId);formData.append('fileName',file.name);awaitthis.$http.post('/api/upload/chunk',formData,{onUploadProgress:(e)=>{this.updateProgress(fileId,i,e.loaded/e.total);}});// 保存进度到本地存储this.saveProgress(fileId,i);}// 通知服务器合并文件awaitthis.$http.post('/api/upload/merge',{fileId,fileName:file.name,totalChunks});},// IE8兼容方案initIE8Upload(){if(!window.FileReader){// 使用传统表单上传+ActiveX控件this.$refs.uploadForm.style.display='block';}}}}

后端部分(JSP/Servlet)

// FileUploadServlet.java@WebServlet("/api/upload/chunk")publicclassFileUploadServletextendsHttpServlet{privatestaticfinalintCHUNK_SIZE=4*1024*1024;// 4MBprotectedvoiddoPost(HttpServletRequestreq,HttpServletResponseresp){try{StringfileId=req.getParameter("fileId");intchunkIndex=Integer.parseInt(req.getParameter("chunkIndex"));PartfilePart=req.getPart("file");// 存储分片到临时目录StringtempDir=getTempDir(fileId);FilechunkFile=newFile(tempDir,"chunk_"+chunkIndex);try(InputStreamin=filePart.getInputStream();OutputStreamout=newFileOutputStream(chunkFile)){IOUtils.copy(in,out);}// 更新分片状态到数据库UploadDao.updateChunkStatus(fileId,chunkIndex,"completed");resp.getWriter().write("{\"status\":\"success\"}");}catch(Exceptione){resp.sendError(500,"Upload failed: "+e.getMessage());}}privateStringgetTempDir(StringfileId){StringtempDir=Config.get("upload.temp.dir")+"/"+fileId;newFile(tempDir).mkdirs();returntempDir;}}// UploadDao.javapublicclassUploadDao{publicstaticvoidupdateChunkStatus(StringfileId,intchunkIndex,Stringstatus){Stringsql="INSERT INTO upload_chunks (file_id, chunk_index, status) VALUES (?, ?, ?) "+"ON DUPLICATE KEY UPDATE status = VALUES(status)";try(Connectionconn=DataSource.getConnection();PreparedStatementstmt=conn.prepareStatement(sql)){stmt.setString(1,fileId);stmt.setInt(2,chunkIndex);stmt.setString(3,status);stmt.executeUpdate();}catch(SQLExceptione){thrownewRuntimeException(e);}}publicstaticListgetUploadedChunks(StringfileId){Listchunks=newArrayList<>();Stringsql="SELECT chunk_index FROM upload_chunks WHERE file_id = ? AND status = 'completed'";try(Connectionconn=DataSource.getConnection();PreparedStatementstmt=conn.prepareStatement(sql)){stmt.setString(1,fileId);ResultSetrs=stmt.executeQuery();while(rs.next()){chunks.add(rs.getInt(1));}}catch(SQLExceptione){thrownewRuntimeException(e);}returnchunks;}}

断点续传状态管理

// UploadStatusService.javapublicclassUploadStatusService{privatestaticfinalStringREDIS_PREFIX="upload:status:";publicUploadStatusgetUploadStatus(StringfileId){// 优先从Redis获取try(Jedisjedis=RedisPool.getResource()){Stringkey=REDIS_PREFIX+fileId;Stringjson=jedis.get(key);if(json!=null){returnJSON.parseObject(json,UploadStatus.class);}}// Redis中没有则从数据库加载UploadStatusstatus=newUploadStatus();status.setFileId(fileId);status.setUploadedChunks(UploadDao.getUploadedChunks(fileId));// 存入Redistry(Jedisjedis=RedisPool.getResource()){jedis.setex(REDIS_PREFIX+fileId,3600,JSON.toJSONString(status));}returnstatus;}publicvoidsaveUploadStatus(UploadStatusstatus){// 异步保存到数据库newThread(()->{UploadDao.saveUploadStatus(status);}).start();// 更新Redistry(Jedisjedis=RedisPool.getResource()){jedis.setex(REDIS_PREFIX+status.getFileId(),3600,JSON.toJSONString(status));}}}

四、文件夹处理方案

数据库设计

CREATETABLEfile_transfers(idVARCHAR(64)PRIMARYKEY,user_idINTNOTNULL,file_nameVARCHAR(255),file_pathVARCHAR(1024),file_sizeBIGINT,statusENUM('pending','uploading','completed','failed'),created_atDATETIMEDEFAULTCURRENT_TIMESTAMP,updated_atDATETIMEONUPDATECURRENT_TIMESTAMP,INDEXidx_user_status(user_id,status));CREATETABLEfolder_hierarchy(idINTAUTO_INCREMENTPRIMARYKEY,transfer_idVARCHAR(64)NOTNULL,parent_idINTDEFAULTNULL,nameVARCHAR(255)NOTNULL,relative_pathVARCHAR(1024)NOTNULL,is_directoryTINYINT(1)NOTNULL,file_sizeBIGINTDEFAULT0,FOREIGNKEY(transfer_id)REFERENCESfile_transfers(id),FOREIGNKEY(parent_id)REFERENCESfolder_hierarchy(id),INDEXidx_transfer(transfer_id));

文件夹上传处理流程

前端：递归扫描文件夹结构，生成相对路径映射表
后端：接收文件时解析relativePath字段，重建文件夹结构
存储：阿里云OSS使用带路径的文件名保持层级关系

五、非打包下载实现方案

下载流程设计

客户端请求下载文件夹
服务端生成文件夹清单(不打包)
为每个文件生成预签名OSS URL
前端按清单顺序下载单个文件
本地重建文件夹结构

关键代码

// FileDownloadServlet.java@WebServlet("/api/download/folder")publicclassFileDownloadServletextendsHttpServlet{protectedvoiddoGet(HttpServletRequestreq,HttpServletResponseresp){StringfolderId=req.getParameter("folderId");try{// 获取文件夹结构Listitems=FolderService.getFolderItems(folderId);// 生成下载清单ListdownloadList=newArrayList<>();for(FileItemitem:items){if(!item.isDirectory()){DownloadItemdi=newDownloadItem();di.setPath(item.getRelativePath());di.setUrl(OSSUtil.generatePresignedUrl(item.getOssKey()));downloadList.add(di);}}// 返回JSON格式的下载清单resp.setContentType("application/json");resp.getWriter().write(JSON.toJSONString(downloadList));}catch(Exceptione){resp.sendError(500,"Download failed: "+e.getMessage());}}}// OSSUtil.javapublicclassOSSUtil{privatestaticOSSclient=newOSSClientBuilder().build(Config.get("oss.endpoint"),Config.get("oss.accessKeyId"),Config.get("oss.accessKeySecret"));publicstaticStringgeneratePresignedUrl(StringossKey){Dateexpiration=newDate(System.currentTimeMillis()+3600*1000);GeneratePresignedUrlRequestrequest=newGeneratePresignedUrlRequest(Config.get("oss.bucket"),ossKey,HttpMethod.GET);request.setExpiration(expiration);returnclient.generatePresignedUrl(request).toString();}}

六、IE8兼容性解决方案

上传方案：
- 使用传统的``表单上传
- 通过ActiveX控件实现文件夹选择(需用户授权)
- 分片上传改为多表单顺序提交
下载方案：
- 使用window.location.href直接下载单个文件
- 通过JavaScript循环触发多个文件下载
进度显示：
- 使用隐藏iframe提交表单
- 通过轮询获取上传进度

七、部署架构建议

[负载均衡] | [Nginx集群] —— [应用服务器集群] | | [Redis] [MySQL主从] | [阿里云OSS]

八、商务合作建议

基于贵司需求，建议考虑以下商业化方案：

技术授权模式：
- 一次性买断授权费用：85万元(含税)
- 包含源代码和完整知识产权
- 不限项目数量和企业内部使用
- 提供5个央企/国企项目合作案例
服务内容：
- 完整技术文档和API说明
- 3人天的现场技术培训
- 1年免费远程技术支持
- 后续按需提供付费技术支持服务
实施周期：
- 标准版本交付：2周
- 定制开发集成：4-6周(视具体需求)