网页页面如何设计JSP大文件上传的暂停与继续功能？

大文件传输系统解决方案

作为浙江IT行业软件公司项目负责人，我们面临的大文件传输需求具有很高的技术挑战性。以下是我针对该需求的专业解决方案分析。

需求分析总结

1. 超大文件传输：单文件100GB，文件夹层级结构保持
2. 高稳定性：支持断点续传(浏览器刷新/关闭不丢失进度)
3. 安全要求：支持SM4、AES加密传输与存储，自动解密下载
4. 高性能：非打包下载方案(解决服务器内存问题)
5. 兼容性：多平台(Windows 7+/macOS/Linux)、多浏览器(含IE8)
6. 技术栈：兼容JSP/Spring Boot/Vue2/Vue3/React
7. 部署：支持阿里云OSS/ECS，内网公网部署
8. 授权模式：买断授权(预算98万内)

技术方案设计

系统架构

[客户端] --> [负载均衡] --> [Web服务器] --> [应用服务器] --> [数据库] ↑ ↓ [文件存储] (阿里云OSS/本地存储)

前端实现方案

// Vue2示例 - 大文件上传组件import{encryptFile,generateFileKey}from'@/utils/crypto';import{uploadFile}from'@/api/file';exportdefault{data(){return{files:[],uploader:null};},methods:{handleFileChange(e){constfileList=Array.from(e.target.files);this.files=fileList.map(file=>({file,name:file.name,size:file.size,progress:0,fileKey:generateFileKey(file),chunks:Math.ceil(file.size/(5*1024*1024))// 5MB分片}));},asyncstartUpload(){for(constfileInfoofthis.files){awaitthis.uploadFileByChunk(fileInfo);}},asyncuploadFileByChunk(fileInfo){const{file,chunks}=fileInfo;constchunkSize=5*1024*1024;// 5MB每片for(leti=0;i<chunks;i++){conststart=i*chunkSize;constend=Math.min(file.size,start+chunkSize);constchunk=file.slice(start,end);// 加密分片constencryptedChunk=awaitencryptFile(chunk,'SM4');constformData=newFormData();formData.append('file',encryptedChunk);formData.append('chunkIndex',i);formData.append('chunks',chunks);formData.append('fileKey',fileInfo.fileKey);formData.append('fileName',file.name);formData.append('filePath',file.webkitRelativePath||'');try{awaituploadFile(formData,progress=>{fileInfo.progress=Math.floor((i*100+progress*(100/chunks))/chunks);});}catch(error){console.error('上传失败:',error);break;}}}}};

后端实现方案

// Spring Boot控制器示例 - 文件分片上传@RestController@RequestMapping("/api/file")publicclassFileUploadController{@AutowiredprivateFileServicefileService;@PostMapping("/upload")publicResponseEntityuploadFile(@RequestParam("file")MultipartFilefile,@RequestParam("chunkIndex")intchunkIndex,@RequestParam("chunks")intchunks,@RequestParam("fileKey")StringfileKey,@RequestParam(value="filePath",required=false)StringfilePath,HttpSessionsession){try{// 解密文件分片byte[]decryptedData=CryptoUtil.decrypt(file.getBytes(),"SM4");// 处理文件上传FileUploadResultresult=fileService.handleFileUpload(fileKey,file.getOriginalFilename(),filePath,decryptedData,chunkIndex,chunks,session.getId());returnResponseEntity.ok(result);}catch(Exceptione){returnResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(newErrorResponse("文件上传失败: "+e.getMessage()));}}@GetMapping("/resumeInfo")publicResponseEntitygetResumeInfo(@RequestParam("fileKey")StringfileKey,HttpSessionsession){try{ResumeInfoinfo=fileService.getResumeInfo(fileKey,session.getId());returnResponseEntity.ok(info);}catch(Exceptione){returnResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(newErrorResponse("获取续传信息失败: "+e.getMessage()));}}}

断点续传实现

// 断点续传服务实现@ServicepublicclassFileServiceImplimplementsFileService{@AutowiredprivateFileUploadRepositoryuploadRepository;@AutowiredprivateStorageServicestorageService;@OverridepublicFileUploadResulthandleFileUpload(StringfileKey,StringfileName,StringfilePath,byte[]data,intchunkIndex,inttotalChunks,StringsessionId){// 检查是否已有上传记录FileUploadRecordrecord=uploadRepository.findByFileKey(fileKey);if(record==null){record=newFileUploadRecord();record.setFileKey(fileKey);record.setFileName(fileName);record.setFilePath(filePath);record.setTotalChunks(totalChunks);record.setSessionId(sessionId);record.setUploadedChunks(newArrayList<>());uploadRepository.save(record);}// 存储分片StringchunkKey=fileKey+"_"+chunkIndex;storageService.storeChunk(chunkKey,data);// 更新上传记录if(!record.getUploadedChunks().contains(chunkIndex)){record.getUploadedChunks().add(chunkIndex);uploadRepository.save(record);}// 检查是否所有分片已上传完成if(record.getUploadedChunks().size()==totalChunks){mergeFileChunks(record);returnnewFileUploadResult(true,100,"文件上传完成");}intprogress=(int)((record.getUploadedChunks().size()*100.0)/totalChunks);returnnewFileUploadResult(false,progress,"分片上传成功");}privatevoidmergeFileChunks(FileUploadRecordrecord){// 合并所有分片为完整文件Listchunks=newArrayList<>();for(inti=0;i<record.getTotalChunks();i++){StringchunkKey=record.getFileKey()+"_"+i;byte[]chunkData=storageService.getChunk(chunkKey);chunks.add(chunkData);}// 合并并存储最终文件byte[]fileData=mergeChunks(chunks);storageService.storeFinalFile(record.getFileKey(),fileData);// 清理临时分片for(inti=0;i<record.getTotalChunks();i++){StringchunkKey=record.getFileKey()+"_"+i;storageService.deleteChunk(chunkKey);}// 更新记录为已完成record.setCompleted(true);uploadRepository.save(record);}}

文件夹结构保持实现

// 文件夹结构处理publicclassFileStructureService{publicvoidsaveFolderStructure(StringbasePath,ListfileItems){Map>directoryMap=newHashMap<>();// 按目录分组for(FileItemitem:fileItems){StringdirPath=extractDirectoryPath(item.getFilePath());directoryMap.computeIfAbsent(dirPath,k->newArrayList<>()).add(item);}// 保存目录结构到数据库for(Map.Entry>entry:directoryMap.entrySet()){saveDirectoryRecord(basePath,entry.getKey(),entry.getValue());}}privateStringextractDirectoryPath(StringfilePath){intlastSlash=filePath.lastIndexOf('/');returnlastSlash>0?filePath.substring(0,lastSlash):"";}privatevoidsaveDirectoryRecord(StringbasePath,StringdirPath,Listfiles){DirectoryRecordrecord=newDirectoryRecord();record.setBasePath(basePath);record.setPath(dirPath);record.setFileCount(files.size());// 计算目录大小longsize=files.stream().mapToLong(FileItem::getSize).sum();record.setTotalSize(size);// 保存到数据库directoryRepository.save(record);}}

非打包下载实现

// 文件夹下载服务@ServicepublicclassFolderDownloadService{@AutowiredprivateDirectoryRepositorydirectoryRepository;@AutowiredprivateFileRecordRepositoryfileRecordRepository;@AutowiredprivateStorageServicestorageService;publicStreamingResponseBodydownloadFolder(StringfolderId,HttpServletResponseresponse){// 获取文件夹信息DirectoryRecordfolder=directoryRepository.findById(folderId).orElseThrow(()->newResourceNotFoundException("文件夹不存在"));// 设置响应头response.setContentType("application/octet-stream");response.setHeader("Content-Disposition","attachment; filename=\""+folder.getName()+"\"");// 创建ZIP输出流(不实际打包，流式传输)returnoutputStream->{Listfiles=fileRecordRepository.findByDirectoryId(folderId);for(FileRecordfile:files){// 设置当前文件头response.setHeader("X-File-Name",file.getName());response.setHeader("X-File-Path",file.getPath());response.setHeader("X-File-Size",String.valueOf(file.getSize()));// 流式传输文件内容try(InputStreaminputStream=storageService.getFileStream(file.getStorageKey())){byte[]buffer=newbyte[1024*1024];// 1MB bufferintbytesRead;while((bytesRead=inputStream.read(buffer))!=-1){outputStream.write(buffer,0,bytesRead);outputStream.flush();}}// 文件分隔标记outputStream.write("---FILE_SEPARATOR---".getBytes());outputStream.flush();}};}}

兼容性处理方案

IE8兼容处理

// IE8兼容的上传方案functionsetupIe8Uploader(){if(navigator.userAgent.indexOf('MSIE 8.0')>-1){// IE8使用ActiveX或Flash方案varuploader=newActiveXObject("YourUploader.ActiveX");uploader.onprogress=function(file,loaded,total){updateProgress(file,(loaded/total)*100);};uploader.oncomplete=function(file){console.log('上传完成:',file);};// 注册事件处理document.getElementById('ie8UploadBtn').onclick=function(){varfileInput=document.getElementById('ie8FileInput');uploader.upload(fileInput.value);};}}

多框架适配方案

// React适配器组件importReactfrom'react';import{useFileUpload}from'./useFileUpload';exportconstFileUploaderReact=({onUploadComplete})=>{const{files,handleFileChange,startUpload,progress}=useFileUpload();return(上传文件{files.map((file,index)=>({file.name}))});};// Vue3 Composition APIimport{ref}from'vue';import{uploadFile}from'@/api/file';exportfunctionuseFileUpload(){constfiles=ref([]);consthandleFileChange=(event)=>{files.value=Array.from(event.target.files).map(file=>({file,name:file.name,progress:0}));};conststartUpload=async()=>{for(constfileInfooffiles.value){awaituploadFile(fileInfo.file,(progress)=>{fileInfo.progress=progress;});}};return{files,handleFileChange,startUpload};}

性能优化措施

1. 分片上传/下载：5MB分片大小平衡网络传输和服务器负载
2. 内存优化：流式处理避免大文件内存驻留
3. 并发控制：限制同时上传/下载的连接数
4. 断点信息存储：使用数据库持久化上传状态
5. 缓存策略：热数据缓存减少数据库访问
6. 负载均衡：多服务器分担传输负载

安全实施方案

加密处理核心代码

// 加密解密服务@ServicepublicclassCryptoService{privatestaticfinalStringAES_ALGORITHM="AES/CBC/PKCS5Padding";privatestaticfinalStringSM4_ALGORITHM="SM4/CBC/PKCS7Padding";publicbyte[]encrypt(byte[]data,Stringalgorithm,Stringkey){try{Ciphercipher=Cipher.getInstance(algorithm);SecretKeySpecsecretKey=newSecretKeySpec(key.getBytes(),algorithm.startsWith("AES")?"AES":"SM4");// 使用固定IV保证可恢复性(实际项目应安全存储IV)byte[]iv=newbyte[16];Arrays.fill(iv,(byte)0x01);IvParameterSpecivSpec=newIvParameterSpec(iv);cipher.init(Cipher.ENCRYPT_MODE,secretKey,ivSpec);returncipher.doFinal(data);}catch(Exceptione){thrownewCryptoException("加密失败",e);}}publicbyte[]decrypt(byte[]encryptedData,Stringalgorithm,Stringkey){try{Ciphercipher=Cipher.getInstance(algorithm);SecretKeySpecsecretKey=newSecretKeySpec(key.getBytes(),algorithm.startsWith("AES")?"AES":"SM4");byte[]iv=newbyte[16];Arrays.fill(iv,(byte)0x01);IvParameterSpecivSpec=newIvParameterSpec(iv);cipher.init(Cipher.DECRYPT_MODE,secretKey,ivSpec);returncipher.doFinal(encryptedData);}catch(Exceptione){thrownewCryptoException("解密失败",e);}}publicStringgenerateFileKey(Filefile){// 生成唯一文件标识(结合文件属性和时间戳)StringrawKey=file.getName()+file.length()+System.currentTimeMillis();returnDigestUtils.md5DigestAsHex(rawKey.getBytes());}}

部署架构建议

高可用部署方案

[客户端] → [CDN/负载均衡] → [Web服务器集群] ↓ [应用服务器集群] → [Redis集群(会话/缓存)] ↓ [数据库集群(主从)] [文件存储集群] (OSS/本地存储)

私有云部署配置

# application-prd.ymlstorage:type:oss# 可选 local, oss, s3oss:endpoint:https://your-oss-endpoint.aliyuncs.comaccessKeyId:your-access-keyaccessKeySecret:your-secret-keybucketName:your-bucket-namelocal:rootPath:/data/file-storageserver:maxFileSize:100GBmaxRequestSize:101GBchunkSize:5MBsecurity:crypto:defaultAlgorithm:SM4aesKey:your-aes-keysm4Key:your-sm4-key

商务合作方案

1. 授权模式：98万一次性买断授权，不限项目数量使用
2. 技术支持：5年免费技术支持+升级服务
3. 交付物：
   • 完整源代码及文档
   • 软件著作权证书
   • 央企/国企合作证明材料(5家以上)
   • 信创环境适配报告
4. 实施支持：
   • 3次现场技术培训
   • 首年免费远程技术支持
   • 紧急问题4小时响应

风险评估与应对

1. IE8兼容风险：
   • 应对：开发ActiveX/Flash备

导入项目

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

工程

NOSQL

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

创建数据表

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

修改数据库连接信息

访问页面进行测试

文件存储路径

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

效果预览

文件上传

文件刷新续传

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

文件夹上传

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

批量下载

支持文件批量下载

下载续传

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

文件夹下载

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

下载示例

点击下载完整示例