企业官网建设流程全解析

专业开发日记：WebUploader大文件传输系统（信创兼容版）

日期：2023年11月15日 星期三 郑州 晴

项目背景

今日接到客户紧急需求：开发一套支持20G大文件传输的Web系统，需兼容IE8及信创浏览器（龙芯、红莲花、奇安信），支持文件夹层级结构上传/下载，并满足国产化环境要求（统信UOS/中标麒麟/银河麒麟+达梦/人大金仓数据库）。客户强调需免费开源、7×24小时支持，且现有开源方案（如WebUploader默认实现）存在文件夹上传缺陷。

技术选型与挑战

1. 前端框架：JSP + WebUploader（基于Flash兼容IE8，HTML5模式兼容现代浏览器）
2. 后端：JSP/Servlet（Servlet 3.0异步上传）
3. 加密传输：SM4（国密） + AES（双协议支持）
4. 信创适配：通过WebUploader的runtimeOrder配置优先使用flash兼容旧系统
5. 文件夹上传：需递归解析文件夹结构，生成JSON元数据与文件分片同步传输

核心代码实现

1. 前端配置（JSP页面）

<%@ page contentType="text/html;charset=UTF-8" %> 信创大文件传输系统 选择文件/文件夹 开始上传 var uploader = WebUploader.create({ swf: '/webuploader/Uploader.swf', server: '/upload?action=chunk', pick: { id: '#filePicker', directory: true // 启用文件夹上传 }, formData: { encryptType: 'SM4' // 默认使用SM4加密 }, chunked: true, chunkSize: 5 * 1024 * 1024, // 5MB分片 threads: 3, runtimeOrder: 'flash', // 强制Flash兼容IE8 compress: false }); // 文件夹结构处理 uploader.on('filesQueued', function(files) { files.forEach(file => { if (file.isDir) { // 递归读取文件夹（需配合Flash文件系统API） console.log('检测到文件夹:', file.name); } }); }); // 上传前加密（示例：SM4 ECB模式） uploader.on('uploadBeforeSend', function(block, data) { var key = '1234567890abcdef'; // 实际应从服务端获取 var ciphertext = SM4.encrypt(block.chunk, key); data.ciphertext = ciphertext; });

2. 后端处理（JSP/Servlet）

// UploadServlet.java (Servlet 3.0+)@WebServlet("/upload")@MultipartConfigpublicclassUploadServletextendsHttpServlet{protectedvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{Stringaction=request.getParameter("action");StringencryptType=request.getParameter("encryptType");if("chunk".equals(action)){// 处理分片上传PartfilePart=request.getPart("file");StringchunkIndex=request.getParameter("chunk");StringfileName=request.getParameter("name");// 解密逻辑（示例：AES）if("AES".equals(encryptType)){Stringciphertext=request.getParameter("ciphertext");// byte[] decrypted = AESUtil.decrypt(ciphertext, KEY);// 实际需将解密数据写入临时文件}// 保存分片到临时目录StringtempPath="/tmp/uploads/"+fileName+"_"+chunkIndex;try(InputStreamin=filePart.getInputStream();FileOutputStreamout=newFileOutputStream(tempPath)){byte[]buffer=newbyte[1024];intbytesRead;while((bytesRead=in.read(buffer))!=-1){out.write(buffer,0,bytesRead);}}response.getWriter().write("{\"status\":1}");}}}

3. 文件夹元数据处理

// 前端生成文件夹结构JSONfunctiongenerateFolderMeta(fileEntry){varmeta={name:fileEntry.name,isDir:fileEntry.isDir,children:[]};if(meta.isDir){// 递归读取子文件（需Flash支持）// var reader = fileEntry.createReader();// reader.readEntries(function(entries) {// entries.forEach(entry => {// meta.children.push(generateFolderMeta(entry));// });// });}returnmeta;}// 后端合并分片时重建目录结构// 需在所有分片上传完成后调用合并接口

信创环境适配方案

1. 浏览器兼容：

   • 通过webuploader.flashonly.js强制使用Flash运行时
   • 测试验证：龙芯浏览器（MIPS架构）需Flash插件支持

2. 操作系统适配：

   • 统信UOS：使用Debian包管理安装Java 8 + Tomcat 8
   • 中标麒麟：提供RPM安装包及依赖解决脚本

3. 数据库适配：

   // 达梦数据库连接示例publicclassDMDataSource{publicstaticConnectiongetConnection()throwsSQLException{DriverManager.registerDriver(newdm.jdbc.driver.DmDriver());returnDriverManager.getConnection("jdbc:dm://localhost:5236/DAMENG","SYSDBA","SYSDBA");}}

当前问题与求助

1. 文件夹上传缺陷：

   • WebUploader默认Flash实现无法递归读取子文件夹（需自定义扩展）
   • 信创浏览器对Flash的支持存在差异（红莲花浏览器需额外配置）

2. 加密性能优化：

   • 20G文件加密传输导致内存溢出，需实现流式加密

3. 断点续传实现：

   • 需设计分片校验机制（MD5校验和）

寻求帮助：
诚邀熟悉WebUploader源码、信创环境开发的大神加入QQ群：374992201，提供以下支持：

1. 完善文件夹递归上传逻辑
2. 协助优化SM4加密性能
3. 测试跨浏览器兼容性

明日计划：

1. 完成分片合并接口开发
2. 搭建统信UOS测试环境
3. 编写国产化数据库适配层

（签名：郑州某高校大三学生 张工）

导入项目

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

工程

NOSQL

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

创建数据表

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

修改数据库连接信息

访问页面进行测试

文件存储路径

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

效果预览

文件上传

文件刷新续传

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

文件夹上传

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

下载示例

点击下载完整示例