Vue.js如何通过WebUploader控件解决汽车制造局域网CAD图纸的超大附件分片断点？

前端老炮的20G文件夹上传大冒险附部分代码各位前端同仁们我是老张一个在辽宁苦哈哈写代码的前端民工。最近接了个活客户要求用原生JS实现20G文件夹上传下载还要支持IE9这简直是要了我这把老骨头的命啊不过为了那100块预算划掉为了技术理想我决定拼了项目背景哭诉版客户要求20G大文件上传这是要上传整个硬盘吗文件夹上传保留层级结构1000个分类的文件这是要搞文件管理系统吗支持SM4/AES加密这是要搞国家机密吗断点续传用户重启电脑都不能丢进度这是要我做操作系统吗兼容IE9现在还有人用IE9哦是Windows 7用户好吧我理解预算100元以内这连买杯咖啡都不够啊7*24小时技术支持这是要把我当24小时客服吗3年免费维护这是要签终身合同吗技术选型妥协版经过深思熟虑我决定前端Vue3 原生JS因为客户说不能用WebUploader后端SpringBoot但我不写后端代码哈哈加密crypto-js因为IE9不支持Web Crypto API文件分片自己实现因为找不到现成的IE9兼容方案部分前端代码救命版以下是文件夹上传的核心代码其他功能你们自己实现吧逃20G文件夹上传神器IE9兼容版 body { font-family: Microsoft YaHei, sans-serif; margin: 20px; } .progress-container { width: 100%; background: #f0f0f0; margin: 10px 0; } .progress-bar { height: 20px; background: #4CAF50; width: 0%; text-align: center; line-height: 20px; color: white; } .file-list { margin-top: 20px; border: 1px solid #ddd; padding: 10px; max-height: 300px; overflow-y: auto; } 20G文件夹上传神器IE9兼容版 选择文件夹 开始上传 暂停上传 0% 文件列表 // 全局变量IE9兼容的类实现 var FileUploader { files: [], chunkSize: 5 * 1024 * 1024, // 5MB分片 uploadId: null, paused: false, // 初始化IE9兼容版 init: function() { document.getElementById(fileInput).addEventListener(change, this.handleFileSelect.bind(this)); // 模拟断点续传的本地存储IE9用userData或cookie这里简化用localStorage if (!localStorage.getItem(uploadProgress)) { localStorage.setItem(uploadProgress, JSON.stringify({})); } }, // 处理文件夹选择IE9兼容版 handleFileSelect: function(e) { this.files []; var fileList e.target.files; // 递归构建文件树IE9没有File.webkitRelativePath需要特殊处理 for (var i 0; i fileList.length; i) { var file fileList[i]; // 这里简化处理实际需要解析webkitRelativePath或手动构建路径 // 兼容IE9的替代方案让用户先压缩成zip...开玩笑的 this.files.push({ file: file, path: file.name, // 实际应该用webkitRelativePath uploaded: 0, total: file.size, chunks: Math.ceil(file.size / this.chunkSize), uploadedChunks: 0 }); } this.renderFileList(); }, // 渲染文件列表IE9兼容版 renderFileList: function() { var list document.getElementById(fileList); list.innerHTML ; for (var i 0; i this.files.length; i) { var file this.files[i]; var item document.createElement(li); item.innerHTML file.path ( this.formatFileSize(file.uploaded) / this.formatFileSize(file.total) ); list.appendChild(item); } }, // 格式化文件大小IE9兼容版 formatFileSize: function(bytes) { if (bytes 0) return 0 Bytes; var k 1024; var sizes [Bytes, KB, MB, GB]; var i Math.floor(Math.log(bytes) / Math.log(k)); return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) sizes[i]; }, // 开始上传IE9兼容版 startUpload: function() { if (this.files.length 0) { alert(请先选择文件夹); return; } this.paused false; this.uploadId new Date().getTime(); // 简单生成上传ID // 加载之前的上传进度 var progressData JSON.parse(localStorage.getItem(uploadProgress)); for (var i 0; i this.files.length; i) { var file this.files[i]; var fileId file.path; // 实际应该用更唯一的ID // 如果有之前的上传记录从断点继续 if (progressData[fileId] progressData[fileId].uploadId this.uploadId) { file.uploaded progressData[fileId].uploaded; file.uploadedChunks progressData[fileId].uploadedChunks; } else { progressData[fileId] { uploadId: this.uploadId, uploaded: 0, uploadedChunks: 0 }; } } localStorage.setItem(uploadProgress, JSON.stringify(progressData)); this.uploadNextChunk(); }, // 上传下一个分片IE9兼容版 uploadNextChunk: function() { if (this.paused) return; var fileToUpload null; var fileIndex -1; // 查找下一个需要上传的分片 for (var i 0; i this.files.length; i) { var file this.files[i]; if (file.uploadedChunks file.chunks) { fileToUpload file; fileIndex i; break; } } if (!fileToUpload) { alert(上传完成); return; } var chunkIndex fileToUpload.uploadedChunks; var start chunkIndex * this.chunkSize; var end Math.min(start this.chunkSize, fileToUpload.total); var chunk fileToUpload.file.slice(start, end); // 加密分片IE9兼容版 var encryptedChunk this.encryptData(chunk, secret-key-123); // 实际应该用用户提供的密钥 // 模拟上传实际应该用XMLHttpRequest或ActiveXObject for IE9 console.log(上传分片:, fileToUpload.path, 分片, chunkIndex, /, fileToUpload.chunks); // 更新进度IE9兼容版 fileToUpload.uploadedChunks; fileToUpload.uploaded end; // 保存上传进度 var progressData JSON.parse(localStorage.getItem(uploadProgress)); var fileId fileToUpload.path; progressData[fileId] { uploadId: this.uploadId, uploaded: fileToUpload.uploaded, uploadedChunks: fileToUpload.uploadedChunks }; localStorage.setItem(uploadProgress, JSON.stringify(progressData)); // 更新UI this.renderFileList(); this.updateProgressBar(); // 继续上传下一个分片使用setTimeout模拟异步 var self this; setTimeout(function() { self.uploadNextChunk(); }, 100); // 模拟网络延迟 }, // 加密数据IE9兼容版 encryptData: function(data, key) { // 实际应该用SM4或AES这里简化用CryptoJS的AES // IE9需要额外处理ArrayBuffer到WordArray的转换 if (data instanceof Blob) { return new Promise(function(resolve) { var reader new FileReader(); reader.onload function(e) { var words CryptoJS.enc.Latin1.parse(e.target.result); var encrypted CryptoJS.AES.encrypt(words, key).toString(); resolve(encrypted); }; reader.readAsBinaryString(data); }); } // 简化处理实际需要更复杂的实现 return CryptoJS.AES.encrypt(data, key).toString(); }, // 暂停上传IE9兼容版 pauseUpload: function() { this.paused true; alert(上传已暂停); }, // 更新进度条IE9兼容版 updateProgressBar: function() { var totalUploaded this.files.reduce(function(sum, file) { return sum file.uploaded; }, 0); var totalSize this.files.reduce(function(sum, file) { return sum file.total; }, 0); var percent Math.round((totalUploaded / totalSize) * 100); document.getElementById(progressBar).style.width percent %; document.getElementById(progressBar).innerHTML percent %; } }; // 初始化页面加载时执行 window.onload function() { FileUploader.init(); // 兼容IE9的console.logIE9没有console对象时 if (!window.console) { window.console { log: function() {} }; } }; // 暴露全局方法IE9兼容 window.startUpload function() { FileUploader.startUpload(); }; window.pauseUpload function() { FileUploader.pauseUpload(); };开发心得吐槽版IE9兼容性这简直是一场噩梦没有File API没有Promise没有const/let没有箭头函数…我感觉自己在用石器时代的工具开发火箭。文件夹上传现代浏览器有webkitRelativePath但IE9没有。解决方案要么让用户先压缩成zip要么…算了还是压缩吧客户肯定不同意。断点续传localStorage在IE9中只有5MB限制存储大量上传进度呵呵祝你好运。加密传输IE9不支持Web Crypto API只能用crypto-js这种老库性能感人。20G文件分片上传是必须的但IE9的内存管理…算了别让浏览器崩溃就是胜利。加入我们的接单群广告版各位同仁如果你也在为这些奇葩需求头疼或者想找项目合作欢迎加入我们的QQ群374992201群内福利1~99元超级大红包每天都有接单合作机会技术交流分享推荐项目拿20%提成超级会员50%提成躺着赚钱免责声明求生版以上代码仅供娱乐参考实际项目中请使用成熟的库如WebUploader、Plupload等考虑使用Flash作为IE9的备选方案对于20G文件建议使用专业的大文件传输方案加密传输请使用标准协议如TLS而非前端加密断点续传最好由后端实现最后祝大家项目顺利少遇奇葩需求如果真有客户找上门记得推荐给我啊手动狗头将组件复制到项目中示例中已经包含此目录引入组件配置接口地址接口地址分别对应文件初始化文件数据上传文件进度文件上传完毕文件删除文件夹初始化文件夹删除文件列表参考http://www.ncmem.com/doc/view.aspx?ide1f49f3e1d4742e19135e00bd41fa3de处理事件启动测试启动成功效果数据库效果预览文件上传文件刷新续传支持离线保存文件进度在关闭浏览器刷新浏览器后进行不丢失仍然能够继续上传文件夹上传支持上传文件夹并保留层级结构同样支持进度信息离线保存刷新页面关闭页面重启系统不丢失上传进度。下载示例点击下载完整示例