Vue2如何结合WebUploader实现教育课件多文件分片断点续传的进度条可视化插件？

一个前端老鸟的求生之路大文件上传项目实录各位前端江湖的兄弟姐妹们我是老张一个在甘肃苦哈哈写代码的前端农民工。最近接了个史诗级外包项目客户要求之多让我这个老程序员差点把假发都薅秃了。项目需求让我怀疑人生的清单支持20G大文件上传这得传到猴年马月必须用原生JS实现WebUploader那是什么文件夹上传要保留层级结构IE9听说你想挑战我支持SM4/AES加密加密算法我只会MD5啊断点续传用户关机重启都不丢进度这是要上天啊兼容IE9到最新ChromeWindows 7用户我们还在用IE9呢预算100元客户听说程序员喝西北风就能活免费3年维护我前端实现原生JS的极限运动经过三天三夜的奋战实际是熬夜看文档喝红牛我终于用原生JS搞定了文件夹上传的核心功能。以下是部分代码拿去不谢大文件上传系统 - 老张出品 body { font-family: Microsoft YaHei, sans-serif; margin: 0; padding: 20px; } .upload-area { border: 2px dashed #ccc; padding: 20px; text-align: center; margin-bottom: 20px; } .progress-container { width: 100%; background: #f0f0f0; height: 20px; margin: 10px 0; } .progress-bar { height: 100%; background: #4CAF50; width: 0%; transition: width 0.3s; } .file-list { margin-top: 20px; max-height: 300px; overflow-y: auto; } .file-item { padding: 5px; border-bottom: 1px solid #eee; } 大文件上传系统IE9兼容版 拖拽文件或文件夹到这里或点击选择文件 选择文件/文件夹 准备就绪 // 全局变量存储上传状态 const uploadState { files: [], chunkSize: 5 * 1024 * 1024, // 5MB分片 uploadedChunks: new Map(), // 存储已上传的分片 cryptoKey: thisIsASecretKey123 // 简单加密密钥实际项目请用更安全的方案 }; // 初始化拖拽区域 const dropArea document.getElementById(dropArea); [dragenter, dragover, dragleave, drop].forEach(eventName { dropArea.addEventListener(eventName, preventDefaults, false); }); function preventDefaults(e) { e.preventDefault(); e.stopPropagation(); } [dragenter, dragover].forEach(eventName { dropArea.addEventListener(eventName, highlight, false); }); [dragleave, drop].forEach(eventName { dropArea.addEventListener(eventName, unhighlight, false); }); function highlight() { dropArea.style.borderColor #4CAF50; } function unhighlight() { dropArea.style.borderColor #ccc; } // 处理文件选择/拖放 dropArea.addEventListener(drop, handleDrop, false); document.getElementById(fileInput).addEventListener(change, handleFileSelect); function handleFileSelect(e) { const files Array.from(e.target.files); processFiles(files); } function handleDrop(e) { const dt e.dataTransfer; const files Array.from(dt.files); // IE9兼容处理实际IE9可能不支持webkitdirectory if (typeof dt.items ! undefined dt.items) { const items Array.from(dt.items); const folderItems items.filter(item item.webkitGetAsEntry item.webkitGetAsEntry().isDirectory); if (folderItems.length 0) { // 处理文件夹简化版实际需要递归读取 alert(检测到文件夹上传但IE9可能不支持完整功能建议使用Chrome/Firefox); } } processFiles(files); } // 处理文件简化版实际需要递归处理文件夹 function processFiles(files) { updateStatus(检测到 ${files.length} 个文件); files.forEach(file { // 简单加密文件名实际项目请用更安全的方案 const encryptedName encryptFileName(file.name); uploadState.files.push({ file: file, encryptedName: encryptedName, path: file.webkitRelativePath || file.name, // 保留路径结构 totalChunks: Math.ceil(file.size / uploadState.chunkSize), uploadedChunks: 0 }); addFileToList(file.name, file.size, file.webkitRelativePath || ); }); // 模拟上传实际项目需要调用后端API setTimeout(startUpload, 1000); } // 简单的文件名加密SM4/AES实现请自行搜索加密库 function encryptFileName(name) { // 这里只是示例实际项目请使用加密库 return btoa(name | uploadState.cryptoKey).substring(0, 12) .dat; } // 更新状态显示 function updateStatus(msg) { document.getElementById(status).textContent msg; console.log(msg); } // 添加文件到列表显示 function addFileToList(name, size, path) { const fileList document.getElementById(fileList); const fileItem document.createElement(div); fileItem.className file-item; fileItem.innerHTML div${name} (${formatFileSize(size)})/divdivstylefont-size:12px;color:#666;路径: ${path}/divdivclasschunk-progressidprogress-${name.replace(/\./g, _)}/div; fileList.appendChild(fileItem); } // 格式化文件大小 function formatFileSize(bytes) { if (bytes 0) return 0 Bytes; const k 1024; const sizes [Bytes, KB, MB, GB]; const i Math.floor(Math.log(bytes) / Math.log(k)); return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) sizes[i]; } // 开始上传简化版 function startUpload() { updateStatus(开始上传...); uploadState.files.forEach((fileInfo, index) { // 实际项目需要为每个文件创建上传任务 // 这里简化处理实际需要实现分片上传、断点续传等 // 模拟上传进度 let uploaded 0; const interval setInterval(() { uploaded Math.floor(Math.random() * 1000000); if (uploaded fileInfo.file.size) { uploaded fileInfo.file.size; clearInterval(interval); updateFileProgress(fileInfo.file.name, 100); updateStatus(文件 ${fileInfo.file.name} 上传完成); } else { const progress Math.min(100, Math.round((uploaded / fileInfo.file.size) * 100)); updateFileProgress(fileInfo.file.name, progress); } }, 200); }); } // 更新单个文件上传进度 function updateFileProgress(fileName, percent) { const progressId progress- fileName.replace(/\./g, _); const progressElem document.getElementById(progressId); if (progressElem) { progressElem.innerHTML divstylewidth: ${percent}%;height:10px;background:#4CAF50;/div; } // 更新总进度条 const totalFiles uploadState.files.length; const completedFiles uploadState.files.filter(f { // 实际项目需要根据真实上传状态判断 return true; // 这里简化处理 }).length; const overallProgress Math.round((completedFiles / totalFiles) * 100); document.getElementById(progressBar).style.width overallProgress %; } // 初始化实际项目需要从本地存储加载上传状态 document.addEventListener(DOMContentLoaded, () { updateStatus(系统就绪请选择文件或文件夹); // 模拟从本地存储加载已上传的分片信息实际项目需要实现 // loadUploadStateFromLocalStorage(); });项目感悟前端人的辛酸泪IE9兼容性这简直就是前端开发者的噩梦建议客户直接给用户发新电脑大文件上传分片上传、断点续传、加密传输每个功能都能写一篇论文文件夹结构webkitRelativePath在IE中不支持需要额外处理加密存储SM4/AES加密需要引入加密库但又要考虑IE9兼容性性能优化上传20G文件前端不崩溃已经是奇迹解决方案曲线救国劝说客户建议降低需求比如不支持IE9现在连微软都放弃了降低加密要求AES-128比SM4更容易实现增加预算100元连杯星巴克都买不了技术选型使用WebUploader虽然客户要求原生JS但可以偷偷用引入加密库crypto-js使用IndexedDB存储上传状态实现断点续传团队协作加入我的QQ群374992201加群送红包还能接私活大家一起吐槽客户分享技术解决方案组建接单团队共同承接大项目最终建议各位前端同仁遇到这种史诗级需求时先评估技术可行性再评估时间成本最后评估自己的发际线如果实在搞不定就像我一样写个简化版demo加入各种限制条件然后…跑路开玩笑的实际上我已经把客户拉进了我的QQ群让他们直接和技术大神其实就是群里的同行沟通去了。这招叫做转移矛盾共同致富PS以上代码仅供娱乐实际项目请勿直接使用否则后果自负哦~将组件复制到项目中示例中已经包含此目录引入组件配置接口地址接口地址分别对应文件初始化文件数据上传文件进度文件上传完毕文件删除文件夹初始化文件夹删除文件列表参考http://www.ncmem.com/doc/view.aspx?ide1f49f3e1d4742e19135e00bd41fa3de处理事件启动测试启动成功效果数据库效果预览文件上传文件刷新续传支持离线保存文件进度在关闭浏览器刷新浏览器后进行不丢失仍然能够继续上传文件夹上传支持上传文件夹并保留层级结构同样支持进度信息离线保存刷新页面关闭页面重启系统不丢失上传进度。下载示例点击下载完整示例