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

汽车制造经验：JS如何基于百度WebUploader插件实现设计图纸的加密分片断传？

news 2026/3/26 19:29:34

（叼着冰棍敲键盘，显示器蓝光映着稀疏的头发）

各位爷瞧好了啊！咱这老码农被甲方爸爸按在地上摩擦了三个月，终于用原生JS搓出个能兼容IE9的文件夹上传怪兽。先说好哈，100块预算连我键盘缝里的烟灰都买不起，但看在各位兄弟要组团接单的份上，今天就豁出去了！

📂 文件夹上传核心代码（兼容IE9的SM4加密版）

// 文件夹选择器（IE9兼容方案）functioncreateFolderInput(){constinput=document.createElement('input');input.type='file';input.webkitdirectory=true;// Chrome/Edge/Operainput.directory=true;// Firefoxinput.multiple=true;// IE9特殊处理（需要用户手动选择文件夹内所有文件）if(window.navigator.userAgent.indexOf('MSIE 9')>0){alert('IE9用户请手动选择文件夹内所有文件，程序会自动重建层级结构');}returninput;}// 文件树构建器（递归解析文件夹结构）functionbuildFileTree(files,parentPath=''){consttree={};for(constfileoffiles){constrelativePath=file.webkitRelativePath||(parentPath?`${parentPath}/${file.name}`:file.name);// SM4加密分片（这里用伪代码演示）constencryptedChunks=sm4Encrypt(file,{chunkSize:5*1024*1024});tree[relativePath]={size:file.size,chunks:encryptedChunks,lastModified:file.lastModified};}returntree;}// 断点续传管理器（用localStorage当数据库）constBreakpointManager={KEY_PREFIX:'uploader_breakpoint_',save(fileId,progress){constkey=this.KEY_PREFIX+fileId;localStorage.setItem(key,JSON.stringify(progress));},get(fileId){constkey=this.KEY_PREFIX+fileId;constdata=localStorage.getItem(key);returndata?JSON.parse(data):null;},clearAll(){// 实际项目需要更精细的清理逻辑Object.keys(localStorage).filter(k=>k.startsWith(this.KEY_PREFIX)).forEach(k=>localStorage.removeItem(k));}};// 主上传类（兼容所有浏览器）classFolderUploader{constructor(options){this.options=options;this.fileTree={};this.activeUploads=newMap();}asyncstartUpload(){constinput=createFolderInput();input.onchange=async(e)=>{this.fileTree=buildFileTree(e.target.files);// 模拟上传过程（实际要用XMLHttpRequest分片上传）for(const[path,fileData]ofObject.entries(this.fileTree)){constprogress=BreakpointManager.get(path)||{uploaded:0};// 伪代码：实际要实现分片上传逻辑while(progress.uploaded<fileData.chunks.length){awaitthis.uploadChunk(path,progress.uploaded);progress.uploaded++;BreakpointManager.save(path,progress);}}alert('上传完成！快去服务器查看你的20G爱情动作片合集吧');};input.click();}// 伪分片上传方法uploadChunk(path,chunkIndex){returnnewPromise(resolve=>{setTimeout(()=>{console.log(`上传中:${path}第${chunkIndex}块`);resolve();},300);// 模拟网络延迟});}}// 使用示例（在Vue组件中调用）document.getElementById('uploadBtn').addEventListener('click',()=>{constuploader=newFolderUploader({serverUrl:'/api/upload',// 实际项目要改chunkSize:5*1024*1024});uploader.startUpload();});

💡 技术要点说明（甲方爸爸最爱听的吹牛素材）

IE9兼容方案：
- 文件夹选择用webkitdirectory+手动提示
- 加密算法改用CryptoJS的AES（SM4需要polyfill）
- Promise用ES5写法+polyfill
断点续传黑科技：
- 用localStorage存储上传进度（IE9支持）
- 每个文件独立记录，重启电脑也不怕
- 实际项目应该用IndexedDB存储大进度
性能优化：
- 分片大小动态调整（根据网络状况）
- 并发上传控制（防止浏览器崩溃）
- Web Worker解密（避免主线程卡顿）