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

网页前端如何实现大文件上传的拖拽功能？

news 2026/6/28 16:20:25

北京XX软件公司涉密项目大文件传输解决方案（基于SM4国密算法）

一、项目背景与需求分析

作为服务政府及军工领域的软件企业，我司当前涉密项目需实现以下核心需求：

安全传输：10GB级文件/文件夹的SM4加密传输，支持断点续传
安全存储：服务端采用SM4加密存储，密钥分层管理
信创兼容：适配麒麟/统信OS、龙芯/飞腾CPU、达梦数据库
全源可控：提供完整可审查的源代码，支持国产化中间件
浏览器兼容：支持IE11及现代浏览器（Chrome/Firefox/Edge）

二、技术选型与架构设计

前端架构：

Vue 2.6 + Element UI（兼容IE11）
Web Worker多线程分片
SM4-WebCrypto API封装（兼容国产密码机）

后端架构：

Spring Boot 2.7（替代传统JSP，保留JSP视图层兼容）
MinIO对象存储（适配达梦数据库元数据）
国密SM4-JNI加速模块

关键组件：

加密传输层：自研SM4FileTransfer.js（替代WebUploader）
安全存储层：达梦数据库+透明加密中间件
信创适配层：通过宝兰德应用服务器对接麒麟OS

三、核心代码实现（关键片段）

1. 前端SM4加密上传组件（Vue Mixin）

// src/mixins/Sm4Uploader.jsexportdefault{methods:{asyncinitSm4Crypto(){// 动态加载国密库（兼容WebCrypto/国产密码机）if(window.crypto&&window.crypto.subtle){this.cryptoImpl=awaitimport('./sm4-webcrypto');}else{this.cryptoImpl=awaitimport('./sm4-soft');// 软件实现 fallback}},asyncencryptFileChunk(fileChunk,chunkIndex){constiv=crypto.getRandomValues(newUint8Array(16));constkey=awaitthis.deriveKeyFromPassword('用户密钥');// 实际应从安全存储获取constencrypted=awaitthis.cryptoImpl.encrypt(fileChunk,key,iv);return{data:encrypted,iv:Array.from(iv).join(','),index:chunkIndex};}}}

2. 后端SM4存储服务（Spring Boot）

// com/xxsoft/security/Sm4StorageService.java@ServicepublicclassSm4StorageService{@Value("${sm4.master-key}")privateStringmasterKeyBase64;// 使用JNI加速的SM4实现privatefinalSm4NativeWrappersm4Wrapper;publicvoidstoreEncryptedFile(MultipartFilefile,StringfileId){try(InputStreamis=file.getInputStream()){// 1. 从达梦数据库获取文件密钥（实际项目应使用KMS）byte[]fileKey=getFileKeyFromDb(fileId);// 2. 分块加密存储（示例简化代码）byte[]buffer=newbyte[8192];intbytesRead;while((bytesRead=is.read(buffer))!=-1){byte[]encryptedBlock=sm4Wrapper.encrypt(Arrays.copyOf(buffer,bytesRead),fileKey);minioClient.putObject("secure-bucket",fileId+"/"+UUID.randomUUID(),newByteArrayInputStream(encryptedBlock),bytesRead,null);}}catch(Exceptione){thrownewSecurityException("SM4加密存储失败",e);}}}

3. 达梦数据库兼容层（JSP示例）

<%-- /WEB-INF/views/fileMeta.jsp --%> <%@ page import="com.dameng.jdbc.DmDriver" %> <%@ page import="java.sql.*" %> <% // 初始化达梦连接（实际项目应使用连接池） Class.forName("dm.jdbc.driver.DmDriver"); try (Connection conn = DriverManager.getConnection( "jdbc:dm://localhost:5236/DAMENG", "SYSDBA", "SYSDBA")) { // 查询加密文件元数据 PreparedStatement stmt = conn.prepareStatement( "SELECT FILE_ID, SM4_KEY_HASH FROM SECURE_FILES WHERE FILE_ID = ?"); stmt.setString(1, request.getParameter("id")); ResultSet rs = stmt.executeQuery(); if (rs.next()) { // 返回JSON响应（实际应使用Jackson等库） out.print("{\"fileId\":\"" + rs.getString(1) + "\",\"keyHash\":\"" + rs.getString(2) + "\"}"); } } %>

四、信创环境适配方案

浏览器适配：
- IE11：通过text/event-stream替代Fetch API
- 国产浏览器：检测navigator.userAgent自动切换加密实现
数据库适配：

// 达梦分页查询适配publicPagequeryFiles(intpage,intsize){Stringsql="SELECT * FROM (SELECT a.*, ROWNUM rn FROM ("+"SELECT * FROM SECURE_FILES ORDER BY CREATE_TIME DESC) a "+"WHERE ROWNUM <= ?) WHERE rn > ?";// 参数绑定：page*size, (page-1)*size}

中间件兼容：
- 替换Tomcat为宝兰德应用服务器
- 通过JNDI配置达梦数据源

五、安全增强措施

密钥管理：
- 主密钥：HSM硬件保护
- 文件密钥：达梦数据库TDE透明加密
- 会话密钥：每次传输动态生成
传输安全：
- 前端分片校验：SHA-256 + SM3双哈希
- 后端完整性验证：SM4-CBC模式+PKCS7填充
审计日志：

-- 达梦审计表设计CREATETABLEFILE_ACCESS_LOG(LOG_IDVARCHAR(64)PRIMARYKEY,USER_IDVARCHAR(32)NOTNULL,FILE_IDVARCHAR(64)NOTNULL,OPERATION_TYPECHAR(1)CHECK(OPERATION_TYPEIN('U','D')),IP_ADDRVARCHAR(45),ACCESS_TIMETIMESTAMPDEFAULTSYSTIMESTAMP,SM4_KEY_VERSIONVARCHAR(16));