机械制造局域网方案：Vue2如何通过百度WebUploader组件实现3D模型文件的目录结构分片续传？

涉密大文件传输系统设计方案系统概述作为四川某军工单位的技术负责人针对政府单位涉密项目的大文件传输需求我将设计一个基于国密算法SM4的安全文件传输系统。该系统需要满足10G级别文件传输、文件夹上传下载、服务端加密存储等核心功能同时兼容主流浏览器和信创国产化环境。技术选型分析在前期调研中我们发现现有开源解决方案存在以下问题百度WebUploader已停更存在安全隐患其他开源组件技术支持不足缺乏完整的国密算法SM4集成方案难以满足源代码审查要求因此我们决定基于现有技术栈自主开发核心组件后端SpringBoot 达梦数据库前端Vue CLI 自主开发的上传组件加密集成国密算法SM4系统架构设计前端实现 (Vue CLI)// src/utils/sm4Encryptor.js - SM4加密工具类import{SM4}fromgm-cryptexportdefaultclassSM4Encryptor{constructor(key){if(!key||key.length!16){thrownewError(SM4 key must be 16 bytes)}this.sm4newSM4({mode:cbc,// 使用CBC模式iv:0000000000000000,// 初始化向量padding:pkcs#7})this.sm4.setKey(key,hex)}// 加密方法encrypt(data){if(typeofdatastring){returnthis.sm4.encrypt(data,base64)}thrownewError(Only string encryption is supported)}// 解密方法decrypt(data){returnthis.sm4.decrypt(data,base64,utf8)}// 文件分块加密asyncencryptFileChunk(chunk,progressCallback){returnnewPromise((resolve){constreadernewFileReader()reader.onload(e){constencryptedthis.sm4.encrypt(e.target.result,base64)if(progressCallback){progressCallback()}resolve(encrypted)}reader.readAsBinaryString(chunk)})}}文件上传组件核心代码// src/components/SecureFileUploader.vueimportSM4Encryptorfrom/utils/sm4Encryptorimportaxiosfromaxiosexportdefault{name:SecureFileUploader,props:{uploadUrl:{type:String,required:true},chunkSize:{type:Number,default:5*1024*1024// 5MB分块大小},sm4Key:{type:String,required:true}},data(){return{fileList:[],encryptor:null}},created(){this.encryptornewSM4Encryptor(this.sm4Key)},methods:{triggerFileInput(){this.$refs.fileInput.click()},asynchandleFileChange(e){constitemse.target.filesif(!items||items.length0)return// 处理文件和文件夹for(leti0;iitems.length;i){constfileitems[i]constrelativePathfile.webkitRelativePath||file.name// 添加到文件列表constfileItem{id:this.generateFileId(),file,relativePath,size:file.size,progress:0,status:pending,chunks:Math.ceil(file.size/this.chunkSize)}this.fileList.push(fileItem)// 开始上传awaitthis.uploadFile(fileItem)}},asyncuploadFile(fileItem){fileItem.statusuploadingconstfilefileItem.fileconstchunkSizethis.chunkSizeconsttotalChunksfileItem.chunksfor(letchunkIndex0;chunkIndextotalChunks;chunkIndex){conststartchunkIndex*chunkSizeconstendMath.min(startchunkSize,file.size)constchunkfile.slice(start,end)try{// 加密文件分块constencryptedChunkawaitthis.encryptor.encryptFileChunk(chunk,(){fileItem.progress((chunkIndex1)/totalChunks)*100})// 上传加密后的分块constformDatanewFormData()formData.append(file,newBlob([encryptedChunk]))formData.append(fileName,file.name)formData.append(relativePath,fileItem.relativePath)formData.append(chunkIndex,chunkIndex)formData.append(totalChunks,totalChunks)formData.append(fileId,fileItem.id)formData.append(fileSize,file.size)awaitaxios.post(this.uploadUrl,formData,{headers:{Content-Type:multipart/form-data},onUploadProgress:(progressEvent){// 更新进度constchunkProgress(progressEvent.loaded/progressEvent.total)*100fileItem.progress((chunkIndex*100chunkProgress)/totalChunks)}})}catch(error){console.error(上传分块${chunkIndex1}/${totalChunks}失败:,error)fileItem.statuserrorreturn}}// 所有分块上传完成fileItem.statussuccessthis.$emit(upload-complete,fileItem)},generateFileId(){returnxxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx.replace(/[xy]/g,function(c){constrMath.random()*16|0constvcx?r:(r0x3|0x8)returnv.toString(16)})},formatSize(bytes){if(bytes0)return0 Bytesconstk1024constsizes[Bytes,KB,MB,GB]constiMath.floor(Math.log(bytes)/Math.log(k))returnparseFloat((bytes/Math.pow(k,i)).toFixed(2)) sizes[i]}}}后端实现 (SpringBoot)// 文件上传控制器RestControllerRequestMapping(/api/files)publicclassFileUploadController{privatestaticfinalLoggerloggerLoggerFactory.getLogger(FileUploadController.class);Value(${file.upload-dir})privateStringuploadDir;Value(${sm4.encrypt-key})privateStringsm4Key;privatefinalSM4Utilsm4Util;privatefinalFileMetadataRepositoryfileMetadataRepository;publicFileUploadController(SM4Utilsm4Util,FileMetadataRepositoryfileMetadataRepository){this.sm4Utilsm4Util;this.fileMetadataRepositoryfileMetadataRepository;}PostMapping(/upload)publicResponseEntityuploadFile(RequestParam(file)MultipartFilefile,RequestParam(fileName)StringfileName,RequestParam(relativePath)StringrelativePath,RequestParam(chunkIndex)intchunkIndex,RequestParam(totalChunks)inttotalChunks,RequestParam(fileId)StringfileId,RequestParam(fileSize)longfileSize){try{// 创建文件存储目录PathuploadPathPaths.get(uploadDir).toAbsolutePath().normalize();if(!Files.exists(uploadPath)){Files.createDirectories(uploadPath);}// 处理分块文件StringtempFileNamefileId.part;PathtempFilePathuploadPath.resolve(tempFileName);// 解密文件分块 (服务端也需要支持SM4解密)byte[]decryptedBytessm4Util.decrypt(file.getBytes(),sm4Key);// 写入分块文件try(OutputStreamoutFiles.newOutputStream(tempFilePath,chunkIndex0?StandardOpenOption.APPEND:StandardOpenOption.CREATE)){out.write(decryptedBytes);}// 如果是最后一个分块合并文件if(chunkIndextotalChunks-1){PathfinalFilePathuploadPath.resolve(relativePath);Files.createDirectories(finalFilePath.getParent());// 重命名临时文件为最终文件名Files.move(tempFilePath,finalFilePath,StandardCopyOption.REPLACE_EXISTING);// 保存文件元数据到达梦数据库FileMetadatametadatanewFileMetadata();metadata.setFileId(fileId);metadata.setFileName(fileName);metadata.setRelativePath(relativePath);metadata.setFileSize(fileSize);metadata.setUploadTime(LocalDateTime.now());metadata.setStoragePath(finalFilePath.toString());fileMetadataRepository.save(metadata);logger.info(文件 {} 上传完成,relativePath);}returnResponseEntity.ok().build();}catch(Exceptione){logger.error(文件上传失败: {},e.getMessage(),e);returnResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(Collections.singletonMap(error,文件上传失败));}}}SM4加密工具类 (Java)// SM4加密工具类ComponentpublicclassSM4Util{publicbyte[]encrypt(byte[]data,StringhexKey)throwsException{// 验证密钥长度if(hexKeynull||hexKey.length()!32){thrownewIllegalArgumentException(SM4 key must be 16 bytes (32 hex characters));}// 创建SM4加密器 (使用CBC模式)SM4Enginesm4EnginenewSM4Engine();CBCBlockCiphercbcBlockCiphernewCBCBlockCipher(sm4Engine);// 初始化向量 (16字节的0)byte[]ivnewbyte[16];ParametersWithIVparametersWithIVnewParametersWithIV(newKeyParameter(Hex.decode(hexKey)),iv);// 创建缓冲加密器BufferedBlockCipherciphernewPaddedBufferedBlockCipher(cbcBlockCipher,newPKCS7Padding());cipher.init(true,parametersWithIV);// 执行加密byte[]outputnewbyte[cipher.getOutputSize(data.length)];intlengthcipher.processBytes(data,0,data.length,output,0);lengthcipher.doFinal(output,length);// 返回实际加密后的数据returnArrays.copyOf(output,length);}publicbyte[]decrypt(byte[]encryptedData,StringhexKey)throwsException{// 验证密钥长度if(hexKeynull||hexKey.length()!32){thrownewIllegalArgumentException(SM4 key must be 16 bytes (32 hex characters));}// 创建SM4解密器 (使用CBC模式)SM4Enginesm4EnginenewSM4Engine();CBCBlockCiphercbcBlockCiphernewCBCBlockCipher(sm4Engine);// 初始化向量 (16字节的0)byte[]ivnewbyte[16];ParametersWithIVparametersWithIVnewParametersWithIV(newKeyParameter(Hex.decode(hexKey)),iv);// 创建缓冲解密器BufferedBlockCipherciphernewPaddedBufferedBlockCipher(cbcBlockCipher,newPKCS7Padding());cipher.init(false,parametersWithIV);// 执行解密byte[]outputnewbyte[cipher.getOutputSize(encryptedData.length)];intlengthcipher.processBytes(encryptedData,0,encryptedData.length,output,0);lengthcipher.doFinal(output,length);// 返回实际解密后的数据returnArrays.copyOf(output,length);}}系统安全设计传输安全所有数据传输均采用SM4加密分块上传机制减少单次传输数据量支持断点续传存储安全服务端存储加密文件文件元数据存储在达梦数据库严格的访问权限控制密钥管理使用硬件安全模块(HSM)管理主密钥每次传输使用临时会话密钥密钥交换采用SM2国密算法信创环境兼容性操作系统支持麒麟、统信UOS等国产操作系统浏览器兼容360安全浏览器、红芯浏览器等信创浏览器数据库全面适配达梦数据库中间件支持东方通、宝兰德等国产中间件源代码审查准备为满足政府单位源代码审查要求我们将提供完整的前后端源代码包含详细的开发文档和注释提供加密算法实现的白皮书准备第三方安全审计报告建立源代码版本管理系统后续工作计划完成核心功能开发并进行单元测试进行系统集成测试和性能测试申请国密局相关安全认证准备源代码审查材料部署到测试环境进行用户验收测试该方案完全自主可控所有核心代码均可提供源代码审查满足政府单位对信息安全的高标准要求。将组件复制到项目中示例中已经包含此目录引入组件配置接口地址接口地址分别对应文件初始化文件数据上传文件进度文件上传完毕文件删除文件夹初始化文件夹删除文件列表参考http://www.ncmem.com/doc/view.aspx?ide1f49f3e1d4742e19135e00bd41fa3de处理事件启动测试启动成功效果数据库效果预览文件上传文件刷新续传支持离线保存文件进度在关闭浏览器刷新浏览器后进行不丢失仍然能够继续上传文件夹上传支持上传文件夹并保留层级结构同样支持进度信息离线保存刷新页面关闭页面重启系统不丢失上传进度。批量下载支持文件批量下载下载续传文件下载支持离线保存进度信息刷新页面关闭页面重启系统均不会丢失进度信息。文件夹下载支持下载文件夹并保留层级结构不打包不占用服务器资源。下载示例点击下载完整示例