专业开发日记: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")
@MultipartConfig
public class UploadServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) 
            throws ServletException, IOException {
        
        String action = request.getParameter("action");
        String encryptType = request.getParameter("encryptType");
        
        if ("chunk".equals(action)) {
            // 处理分片上传
            Part filePart = request.getPart("file");
            String chunkIndex = request.getParameter("chunk");
            String fileName = request.getParameter("name");
            
            // 解密逻辑(示例:AES)
            if ("AES".equals(encryptType)) {
                String ciphertext = request.getParameter("ciphertext");
                // byte[] decrypted = AESUtil.decrypt(ciphertext, KEY);
                // 实际需将解密数据写入临时文件
            }
            
            // 保存分片到临时目录
            String tempPath = "/tmp/uploads/" + fileName + "_" + chunkIndex;
            try (InputStream in = filePart.getInputStream();
                 FileOutputStream out = new FileOutputStream(tempPath)) {
                byte[] buffer = new byte[1024];
                int bytesRead;
                while ((bytesRead = in.read(buffer)) != -1) {
                    out.write(buffer, 0, bytesRead);
                }
            }
            
            response.getWriter().write("{\"status\":1}");
        }
    }
}
3. 文件夹元数据处理
// 前端生成文件夹结构JSON
function generateFolderMeta(fileEntry) {
    var meta = {
        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));
        //     });
        // });
    }
    return meta;
}

// 后端合并分片时重建目录结构
// 需在所有分片上传完成后调用合并接口

信创环境适配方案

  1. 浏览器兼容

    • 通过webuploader.flashonly.js强制使用Flash运行时
    • 测试验证:龙芯浏览器(MIPS架构)需Flash插件支持
  2. 操作系统适配

    • 统信UOS:使用Debian包管理安装Java 8 + Tomcat 8
    • 中标麒麟:提供RPM安装包及依赖解决脚本
  3. 数据库适配

    // 达梦数据库连接示例
    public class DMDataSource {
        public static Connection getConnection() throws SQLException {
            DriverManager.registerDriver(new dm.jdbc.driver.DmDriver());
            return DriverManager.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统一配置:点击查看教程

工程

image

NOSQL

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

创建数据表

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

修改数据库连接信息

image

访问页面进行测试

image

文件存储路径

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

效果预览

文件上传

文件上传

文件刷新续传

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

文件夹上传

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

下载示例

点击下载完整示例

Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐