vue大文件上传的断点续传功能优化与讨论交流

一个前端老鸟的"求生"之路：大文件上传项目实录

各位前端江湖的兄弟姐妹们，我是老张，一个在甘肃苦哈哈写代码的"前端农民工"。最近接了个"史诗级"外包项目，客户要求之多让我这个老程序员差点把假发都薅秃了。

项目需求：让我怀疑人生的清单

1. 支持20G大文件上传（这得传到猴年马月？）
2. 必须用原生JS实现（WebUploader？那是什么？）
3. 文件夹上传要保留层级结构（IE9：听说你想挑战我？）
4. 支持SM4/AES加密（加密算法？我只会MD5啊！）
5. 断点续传（用户关机重启都不丢进度？这是要上天啊！）
6. 兼容IE9到最新Chrome（Windows 7用户：我们还在用IE9呢！）
7. 预算100元（客户：听说程序员喝西北风就能活？）
8. 免费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)})</div><divstyle="font-size:12px;color:#666;">路径: ${path}</div><divclass="chunk-progress"id="progress-${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 = `<divstyle="width: ${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(); });

项目感悟：前端人的辛酸泪

1. IE9兼容性：这简直就是前端开发者的噩梦，建议客户直接给用户发新电脑
2. 大文件上传：分片上传、断点续传、加密传输，每个功能都能写一篇论文
3. 文件夹结构：webkitRelativePath在IE中不支持，需要额外处理
4. 加密存储：SM4/AES加密需要引入加密库，但又要考虑IE9兼容性
5. 性能优化：上传20G文件，前端不崩溃已经是奇迹

解决方案：曲线救国

1. 劝说客户：建议降低需求，比如：

   • 不支持IE9（现在连微软都放弃了）
   • 降低加密要求（AES-128比SM4更容易实现）
   • 增加预算（100元连杯星巴克都买不了）

2. 技术选型：

   • 使用WebUploader（虽然客户要求原生JS，但可以偷偷用）
   • 引入加密库（crypto-js）
   • 使用IndexedDB存储上传状态（实现断点续传）

3. 团队协作：

   • 加入我的QQ群：374992201（加群送红包，还能接私活）
   • 大家一起吐槽客户，分享技术解决方案
   • 组建接单团队，共同承接大项目

最终建议

各位前端同仁，遇到这种"史诗级"需求时：

1. 先评估技术可行性
2. 再评估时间成本
3. 最后评估自己的发际线

如果实在搞不定，就像我一样：

• 写个简化版demo
• 加入各种限制条件
• 然后…跑路！（开玩笑的）

实际上，我已经把客户拉进了我的QQ群，让他们直接和"技术大神"（其实就是群里的同行）沟通去了。这招叫做：转移矛盾，共同致富！

（PS：以上代码仅供娱乐，实际项目请勿直接使用，否则后果自负哦~）

将组件复制到项目中

示例中已经包含此目录

引入组件

配置接口地址

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

处理事件

启动测试

启动成功

效果

数据库

效果预览

文件上传

文件刷新续传

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

文件夹上传

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

下载示例

点击下载完整示例