Vue.js如何制作分片上传大文件的DEMO？

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

需求分析

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

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

技术选型

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

前端方案

基于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);}// 内部类定义省略...}

信创环境兼容性考虑

前端兼容性：
- 提供wasm和纯JS两套SM4实现，wasm优先
- 使用标准的Web API，避免使用实验性功能
- 测试环境包括：麒麟OS+飞腾CPU、UOS+龙芯等组合
后端兼容性：
- 使用BouncyCastle作为密码学提供者，兼容国产CPU指令集
- 避免使用与特定JDK版本绑定的API
- 测试环境包括：中科方德JDK、华为Kunpeng JDK等

安全考虑

密钥管理：
- 示例中简化了密钥处理，实际项目应：
- 使用硬件加密机或软HSM管理主密钥
- 每个文件使用随机生成的密钥，通过主密钥加密后传输
- 考虑使用国密SSL/TLS (GMTLS)
传输安全：
- 所有通信必须通过HTTPS
- 考虑使用双向SSL认证
存储安全：
- 服务端存储的是加密后的文件
- 只有授权用户才能获取解密密钥