news 2025/12/23 20:13:17

Vue-cli如何集成JQuery完成网页大文件秒传功能？

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
Vue-cli如何集成JQuery完成网页大文件秒传功能？

大文件传输系统设计方案（基于SM4国密算法）

需求分析

作为四川某软件公司的开发人员，我面临以下核心需求：

  1. 实现10GB级别大文件的分片上传/下载
  2. 采用国密SM4算法进行端到端加密
  3. 服务端需支持SM4加密存储
  4. 兼容主流浏览器及信创国产化环境
  5. 基于SpringBoot+Vue技术栈
  6. 需要开源可审查的代码

技术选型

经过调研，我决定采用以下技术方案：

前端方案

  • 基于Vue-cli构建
  • 使用自定义分片上传组件（替代已停更的WebUploader）
  • 集成SM4加密的JavaScript实现（通过wasm或纯JS实现）

后端方案

  • SpringBoot 2.7.x
  • 集成BouncyCastle的SM4实现
  • 支持分片合并和加密存储

前端核心代码实现

1. SM4加密工具类 (sm4-utils.js)

// 使用wasm版本的SM4实现（性能更好）letsm4Module=null;exportasyncfunctioninitSM4(){if(sm4Module)return;try{sm4Module=awaitimport('sm4-wasm');awaitsm4Module.default();// 初始化wasm模块}catch(e){console.error('SM4 WASM加载失败，降级使用JS实现',e);// 降级方案：使用纯JS实现awaitimport('./sm4-js').then(module=>{sm4Module=module;});}}exportfunctionencryptFileChunk(chunk,key,iv){if(!sm4Module)thrownewError('SM4未初始化');// 转换为ArrayBufferconstarrayBuffer=chunkinstanceofArrayBuffer?chunk:awaitnewResponse(chunk).arrayBuffer();// 使用SM4-CBC模式加密returnsm4Module.encrypt(arrayBuffer,key,iv,'CBC');}exportfunctiondecryptFileChunk(encryptedChunk,key,iv){if(!sm4Module)thrownewError('SM4未初始化');returnsm4Module.decrypt(encryptedChunk,key,iv,'CBC');}

2. 分片上传组件 (FileUploader.vue)

import{initSM4,encryptFileChunk}from'./sm4-utils';// 生成随机IVfunctiongenerateIV(){returncrypto.getRandomValues(newUint8Array(16));}exportdefault{data(){return{file:null,uploading:false,progress:0,chunkSize:5*1024*1024,// 5MB每片sm4Key:null,// 实际应从安全渠道获取fileId:null};},asyncmounted(){awaitinitSM4();// 生成随机密钥（实际项目应从安全渠道获取）this.sm4Key=crypto.getRandomValues(newUint8Array(16));},methods:{handleFileChange(e){this.file=e.target.files[0];this.progress=0;},asyncstartUpload(){if(!this.file)return;this.uploading=true;this.progress=0;try{// 1. 初始化上传，获取fileIdconstinitRes=awaitthis.$http.post('/api/upload/init',{fileName:this.file.name,fileSize:this.file.size,chunkSize:this.chunkSize});this.fileId=initRes.data.fileId;constiv=generateIV();// 2. 上传加密分片constchunkCount=Math.ceil(this.file.size/this.chunkSize);letuploadedChunks=0;for(leti=0;i<chunkCount;i++){conststart=i*this.chunkSize;constend=Math.min(start+this.chunkSize,this.file.size);constchunk=this.file.slice(start,end);// 加密分片constencryptedChunk=awaitencryptFileChunk(chunk,this.sm4Key,iv);// 上传分片constformData=newFormData();formData.append('fileId',this.fileId);formData.append('chunkIndex',i);formData.append('chunk',newBlob([encryptedChunk]));formData.append('iv',newBlob([iv]));// 每个分片使用相同IV（简单实现）awaitthis.$http.post('/api/upload/chunk',formData,{headers:{'Content-Type':'multipart/form-data'}});uploadedChunks++;this.progress=Math.floor((uploadedChunks/chunkCount)*100);}// 3. 完成上传awaitthis.$http.post('/api/upload/complete',{fileId:this.fileId,iv:Array.from(iv).join(',')// 实际应使用更安全的方式传输IV});this.$emit('upload-success',{fileId:this.fileId,fileName:this.file.name});}catch(error){console.error('上传失败:',error);this.$emit('upload-error',error);}finally{this.uploading=false;}}}};

后端核心代码实现

1. SM4工具类 (SM4Util.java)

importorg.bouncycastle.crypto.engines.SM4Engine;importorg.bouncycastle.crypto.modes.CBCBlockCipher;importorg.bouncycastle.crypto.paddings.PaddedBufferedBlockCipher;importorg.bouncycastle.crypto.params.KeyParameter;importorg.bouncycastle.crypto.params.ParametersWithIV;importorg.bouncycastle.jce.provider.BouncyCastleProvider;importjavax.crypto.Cipher;importjavax.crypto.spec.SecretKeySpec;importjava.security.Security;importjava.util.Base64;publicclassSM4Util{static{Security.addProvider(newBouncyCastleProvider());}// 加密文件分片publicstaticbyte[]encrypt(byte[]key,byte[]iv,byte[]input)throwsException{PaddedBufferedBlockCiphercipher=newPaddedBufferedBlockCipher(newCBCBlockCipher(newSM4Engine()));cipher.init(true,newParametersWithIV(newKeyParameter(key),iv));byte[]output=newbyte[cipher.getOutputSize(input.length)];intlen=cipher.processBytes(input,0,input.length,output,0);len+=cipher.doFinal(output,len);if(len<output.length){byte[]result=newbyte[len];System.arraycopy(output,0,result,0,len);returnresult;}returnoutput;}// 解密文件分片publicstaticbyte[]decrypt(byte[]key,byte[]iv,byte[]input)throwsException{PaddedBufferedBlockCiphercipher=newPaddedBufferedBlockCipher(newCBCBlockCipher(newSM4Engine()));cipher.init(false,newParametersWithIV(newKeyParameter(key),iv));byte[]output=newbyte[cipher.getOutputSize(input.length)];intlen=cipher.processBytes(input,0,input.length,output,0);len+=cipher.doFinal(output,len);if(len<output.length){byte[]result=newbyte[len];System.arraycopy(output,0,result,0,len);returnresult;}returnoutput;}// 使用JCE方式（备选方案）publicstaticbyte[]encryptJCE(byte[]key,byte[]iv,byte[]input)throwsException{Ciphercipher=Cipher.getInstance("SM4/CBC/PKCS5Padding","BC");SecretKeySpeckeySpec=newSecretKeySpec(key,"SM4");cipher.init(Cipher.ENCRYPT_MODE,keySpec,newjavax.crypto.spec.IvParameterSpec(iv));returncipher.doFinal(input);}}

2. 文件上传控制器 (FileUploadController.java)

importorg.springframework.beans.factory.annotation.Value;importorg.springframework.web.bind.annotation.*;importorg.springframework.web.multipart.MultipartFile;importjava.io.File;importjava.io.FileOutputStream;importjava.nio.file.Files;importjava.nio.file.Paths;importjava.util.Base64;importjava.util.UUID;importjava.util.concurrent.ConcurrentHashMap;@RestController@RequestMapping("/api/upload")publicclassFileUploadController{@Value("${file.upload-dir}")privateStringuploadDir;// 临时存储上传状态privatefinalConcurrentHashMapsessions=newConcurrentHashMap<>();// 初始化上传@PostMapping("/init")publicUploadInitResponseinitUpload(@RequestBodyUploadInitRequestrequest){StringfileId=UUID.randomUUID().toString();UploadSessionsession=newUploadSession();session.setFileName(request.getFileName());session.setTotalSize(request.getFileSize());session.setChunkSize(request.getChunkSize());session.setReceivedChunks(0);sessions.put(fileId,session);// 创建临时目录newFile(uploadDir+"/"+fileId).mkdirs();returnnewUploadInitResponse(fileId);}// 上传分片@PostMapping("/chunk")publicvoiduploadChunk(@RequestParam("fileId")StringfileId,@RequestParam("chunkIndex")intchunkIndex,@RequestParam("chunk")MultipartFilechunkFile,@RequestParam("iv")StringivBase64)throwsException{UploadSessionsession=sessions.get(fileId);if(session==null){thrownewRuntimeException("无效的上传会话");}// 解密分片（实际项目中密钥应从安全渠道获取）byte[]key=hexStringToByteArray("你的SM4密钥16字节");// 示例，实际应从配置或安全存储获取byte[]iv=Base64.getDecoder().decode(ivBase64);byte[]encryptedChunk=chunkFile.getBytes();byte[]decryptedChunk=SM4Util.decrypt(key,iv,encryptedChunk);// 保存分片StringchunkPath=uploadDir+"/"+fileId+"/"+chunkIndex;try(FileOutputStreamfos=newFileOutputStream(chunkPath)){fos.write(decryptedChunk);}session.setReceivedChunks(session.getReceivedChunks()+1);}// 完成上传@PostMapping("/complete")publicUploadCompleteResponsecompleteUpload(@RequestBodyUploadCompleteRequestrequest)throwsException{StringfileId=request.getFileId();UploadSessionsession=sessions.get(fileId);if(session==null){thrownewRuntimeException("无效的上传会话");}// 合并分片StringtempDir=uploadDir+"/"+fileId;StringfinalPath=uploadDir+"/"+fileId+".enc";// 加密存储try(FileOutputStreamfos=newFileOutputStream(finalPath)){for(inti=0;i<session.getTotalChunks();i++){byte[]chunk=Files.readAllBytes(Paths.get(tempDir+"/"+i));fos.write(chunk);}}// 清理临时文件Files.walk(Paths.get(tempDir)).sorted((a,b)->b.compareTo(a))// 反向排序先删文件再删目录.forEach(path->{try{Files.delete(path);}catch(Exceptione){// 记录日志}});// 存储文件元信息（实际项目应存入数据库）FileMetameta=newFileMeta();meta.setFileId(fileId);meta.setOriginalName(session.getFileName());meta.setEncryptedPath(finalPath);meta.setSize(session.getTotalSize());// 这里应该将meta保存到数据库returnnewUploadCompleteResponse(fileId,session.getFileName());}// 计算总分片数privateintcalculateTotalChunks(longfileSize,intchunkSize){return(int)Math.ceil((double)fileSize/chunkSize);}// 内部类定义省略...}

信创环境兼容性考虑

  1. 前端兼容性：

    • 提供wasm和纯JS两套SM4实现，wasm优先
    • 使用标准的Web API，避免使用实验性功能
    • 测试环境包括：麒麟OS+飞腾CPU、UOS+龙芯等组合

  2. 后端兼容性：

    • 使用BouncyCastle作为密码学提供者，兼容国产CPU指令集
    • 避免使用与特定JDK版本绑定的API
    • 测试环境包括：中科方德JDK、华为Kunpeng JDK等

安全考虑

  1. 密钥管理：

    • 示例中简化了密钥处理，实际项目应：
    • 使用硬件加密机或软HSM管理主密钥
    • 每个文件使用随机生成的密钥，通过主密钥加密后传输
    • 考虑使用国密SSL/TLS (GMTLS)

  2. 传输安全：

    • 所有通信必须通过HTTPS
    • 考虑使用双向SSL认证

  3. 存储安全：

    • 服务端存储的是加密后的文件
    • 只有授权用户才能获取解密密钥

性能优化建议

  1. 前端可实现断点续传，记录已上传分片
  2. 后端可使用异步处理合并分片操作
  3. 对于超大文件，考虑使用更高效的存储格式
  4. 实现分片校验机制，确保数据完整性

总结

本方案提供了完整的SM4加密大文件传输实现，从前端分片加密到后端存储都符合国密要求。代码结构清晰，便于进行源代码审查。虽然实现起来比使用现成组件复杂，但完全可控且符合政府单位的安全要求。

下一步工作建议：

  1. 完善密钥管理方案
  2. 增加下载功能实现
  3. 添加更完善的错误处理和日志
  4. 进行全面的性能测试和安全审计

将组件复制到项目中

示例中已经包含此目录

引入组件

配置接口地址

接口地址分别对应：文件初始化，文件数据上传，文件进度，文件上传完毕，文件删除，文件夹初始化，文件夹删除，文件列表
参考：http://www.ncmem.com/doc/view.aspx?id=e1f49f3e1d4742e19135e00bd41fa3de

处理事件

启动测试

启动成功

效果

数据库

效果预览

文件上传

文件刷新续传

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

文件夹上传

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

批量下载

支持文件批量下载

下载续传

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

文件夹下载

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

下载示例

点击下载完整示例

版权声明: 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！
网站建设 2025/12/17 23:17:14

HTML如何设计JQuery支持大文件上传的拖拽功能？

2023年11月2日 星期四 阴有小雨 外包项目日志 - 企业级大文件传输系统Day3 项目背景与架构设计 客户是某地质勘探研究院&#xff0c;每日需上传**20GB**的勘探数据&#xff08;含激光扫描点云、地质剖面图等&#xff09;&#xff0c;要求&#xff1a; 文件夹结构保留&#xf…

作者头像 李华
网站建设 2025/12/17 23:17:10

yolo-ORBSLAM2复现

这个也是一个经典的问题了&#xff0c;我是想复现&#xff0c;再进行修改&#xff0c;因为我不使用yolo作为检测&#xff0c;但要先搞清楚检测框是怎么送入slam的&#xff0c;所以先复现各位大佬们的。主要参考&#xff1a; https://github.com/JinYoung6/orbslam_addsemantic…

作者头像 李华
网站建设 2025/12/17 23:15:34

python基于大数据技术的购房推荐系统的设计与实现

Python基于大数据技术的购房推荐系统的设计与实现是一个复杂但具有广泛应用前景的项目。以下是对该系统的详细介绍&#xff1a; 一、系统概述 购房推荐系统利用Python编程语言的强大功能和丰富的大数据技术&#xff0c;结合机器学习算法和推荐算法&#xff0c;对购房数据进行深…

作者头像 李华
网站建设 2025/12/17 23:15:11

介观交通流仿真软件：DynusT_（20）.DynusT在实际项目中的应用

DynusT在实际项目中的应用 在上一节中&#xff0c;我们已经了解了DynusT的基本功能和使用方法。本节将详细介绍如何在实际项目中应用DynusT进行交通流仿真。我们将通过具体的案例来展示如何设置仿真参数、导入交通网络数据、模拟交通流量以及分析仿真结果。这些案例将涵盖城市交…

作者头像 李华
网站建设 2025/12/17 23:14:57

深入JVM（三）：JVM执行引擎

JVM执行引擎 一、JVM前后端编译 前端编译&#xff1a;使用编译器将Java文件编译成class字节码文件后端编译&#xff1a;将class字节码文件编译成机器码指令java 跨平台直接理解&#xff1a;前端编译将java文件编译成class文件&#xff0c; 然后使用jvm&#xff08;后端编译&…

作者头像 李华
网站建设 2025/12/17 23:13:59

通信系统仿真：通信系统基础理论_（8）.抗干扰技术

抗干扰技术 1. 引言 在通信系统中，信号的传输会受到各种干扰的影响，这些干扰可能来自自然环境（如电磁波、雷电等）或人为因素（如其他通信系统、电子设备等）。这些干扰会降低通信系统的性能，导致信号失真、误码率增加等问题。因此，研究和应用抗干扰技术是非常重要的。本…

作者头像 李华