vue2环境下如何编写大文件分片上传的完整源码？

大文件上传解决方案

各位同行大佬们好，作为一个在广东摸爬滚打多年的前端"老油条"，最近接了个让我差点秃顶的项目——20G大文件上传系统，还要兼容IE9！这感觉就像让我用竹篮子去打水还要不漏一样刺激…

需求分析：客户这是要我老命啊

• 20G大文件传输：我寻思着这不是上传，这是在往浏览器里塞一头大象啊
• 文件夹保留层级：客户说文件夹里有1000个分类文件，这哪是文件夹，这是个文件博物馆！
• 加密传输存储：SM4、AES齐上阵，比瑞士银行的保险箱还严实
• 断点续传：关了浏览器、重启电脑都不能丢进度，这要求比我的记忆力靠谱多了
• 非打包下载：几万个文件直接下载，这网速得比我的工资涨得还快才行
• 兼容IE9：Windows7+IE9的组合，让我梦回2012年，青春啊！

最绝的是预算100元以内还要求7×24小时支持，这价格连我家的路由器月租都不够啊兄弟们！

前端解决方案：与IE9的世纪和解

既然客户爸爸说了要用原生JS，那咱们就用H5的File API+IndexedDB来整活：

穷逼版大文件上传 /* 祖传CSS，兼容IE9 */ .upload-area { border: 2px dashed #ccc; padding: 20px; text-align: center; margin: 20px; background: #f9f9f9; } .progress-container { width: 100%; background-color: #f5f5f5; margin: 10px 0; height: 20px; position: relative; } .progress-bar { height: 100%; background-color: #4CAF50; width: 0%; transition: width 0.3s; } .progress-text { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #333; font-size: 12px; } .file-item { margin: 10px 0; padding: 10px; border: 1px solid #eee; background: #fff; } .file-name { font-weight: bold; } .file-path { color: #666; font-size: 0.9em; margin-left: 10px; } .file-size { color: #888; font-size: 0.9em; margin-left: 10px; } .file-controls { margin-top: 5px; } button { padding: 5px 10px; margin-right: 5px; background: #f0f0f0; border: 1px solid #ddd; cursor: pointer; } button:hover { background: #e0e0e0; } 大文件上传（兼容IE9版） 拖放文件或文件夹到此处 或 选择文件/文件夹 等待上传文件... 开始上传 暂停 继续 加密方式： SM4国密 AES-256 // 上传队列 var uploadQueue = []; var currentUpload = null; var chunkSize = 5 * 1024 * 1024; // 5MB分块 // 初始化 function init() { // 文件选择处理 document.getElementById('fileInput').addEventListener('change', function(e) { handleFiles(e.target.files); }); // 拖放处理 var dropArea = document.getElementById('dropArea'); dropArea.addEventListener('dragover', function(e) { e.preventDefault(); dropArea.style.borderColor = '#4CAF50'; dropArea.style.background = '#f0fff0'; }); dropArea.addEventListener('dragleave', function() { dropArea.style.borderColor = '#ccc'; dropArea.style.background = '#f9f9f9'; }); dropArea.addEventListener('drop', function(e) { e.preventDefault(); dropArea.style.borderColor = '#ccc'; dropArea.style.background = '#f9f9f9'; handleFiles(e.dataTransfer.files); }); // 加载未完成的传输 loadPendingTransfers(); } // 处理文件选择 function handleFiles(files) { var queueContainer = document.getElementById('uploadQueue'); queueContainer.innerHTML = ''; for (var i = 0; i < files.length; i++) { var file = files[i]; addFileToQueue(file); } } // 添加文件到队列 function addFileToQueue(file) { var fileItem = { id: generateFileId(file), name: file.name, path: file.webkitRelativePath || '', size: file.size, progress: 0, status: 'pending', file: file }; uploadQueue.push(fileItem); renderQueue(); } // 渲染队列 function renderQueue() { var queueContainer = document.getElementById('uploadQueue'); queueContainer.innerHTML = ''; if (uploadQueue.length === 0) { queueContainer.innerHTML = '<p>等待上传文件...</p>'; return; } for (var i = 0; i < uploadQueue.length; i++) { var item = uploadQueue[i]; var itemElement = document.createElement('div'); itemElement.className = 'file-item'; itemElement.innerHTML = `<div><spanclass="file-name">${item.name}</span><spanclass="file-path">${item.path}</span><spanclass="file-size">${formatFileSize(item.size)}</span></div><divclass="progress-container"><divclass="progress-bar"style="width:${item.progress}%"></div><spanclass="progress-text">${item.progress}%</span></div><divclass="file-controls"><button onclick="pauseItem('${item.id}')" ${item.status !== 'uploading' ? 'disabled' : ''}>暂停</button><button onclick="resumeItem('${item.id}')" ${item.status !== 'paused' ? 'disabled' : ''}>继续</button><buttononclick="cancelItem('${item.id}')">取消</button></div>`; queueContainer.appendChild(itemElement); } } // 开始上传 function startUpload() { if (uploadQueue.length === 0) return; currentUpload = uploadQueue.find(item => item.status === 'pending'); if (currentUpload) { currentUpload.status = 'uploading'; uploadFile(currentUpload); } } // 上传文件 function uploadFile(fileItem) { var file = fileItem.file; var totalChunks = Math.ceil(file.size / chunkSize); // 从本地存储加载断点 var resumeChunk = localStorage.getItem('resume_' + fileItem.id) || 0; // 上传分块 for (var chunkIndex = resumeChunk; chunkIndex < totalChunks; chunkIndex++) { if (fileItem.status === 'paused') break; var start = chunkIndex * chunkSize; var end = Math.min(start + chunkSize, file.size); var chunk = file.slice(start, end); var formData = new FormData(); formData.append('fileId', fileItem.id); formData.append('chunkIndex', chunkIndex); formData.append('totalChunks', totalChunks); formData.append('fileName', fileItem.name); formData.append('filePath', fileItem.path); formData.append('fileSize', fileItem.size); formData.append('chunkData', chunk); formData.append('encryption', document.getElementById('encryptionType').value); formData.append('encryptionKey', document.getElementById('encryptionKey').value); // AJAX上传（兼容IE9） var xhr = new XMLHttpRequest(); xhr.open('POST', '/api/upload/chunk', false); // 同步上传 xhr.upload.onprogress = function(e) { var loaded = chunkIndex * chunkSize + e.loaded; fileItem.progress = Math.round((loaded / fileItem.size) * 100); renderQueue(); }; xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if (xhr.status === 200) { // 保存断点 localStorage.setItem('resume_' + fileItem.id, chunkIndex + 1); if (chunkIndex === totalChunks - 1) { // 合并文件 mergeFile(fileItem.id); fileItem.status = 'completed'; startUpload(); // 开始下一个文件 } } else { console.error('上传失败:', xhr.responseText); fileItem.status = 'error'; renderQueue(); } } }; try { xhr.send(formData); } catch (e) { console.error('上传出错:', e); fileItem.status = 'error'; renderQueue(); break; } } } // 暂停上传 function pauseUpload() { if (currentUpload) { currentUpload.status = 'paused'; renderQueue(); } } // 继续上传 function resumeUpload() { if (currentUpload && currentUpload.status === 'paused') { currentUpload.status = 'uploading'; uploadFile(currentUpload); } } // 暂停单个项目 function pauseItem(fileId) { var item = uploadQueue.find(item => item.id === fileId); if (item) { item.status = 'paused'; renderQueue(); } } // 继续单个项目 function resumeItem(fileId) { var item = uploadQueue.find(item => item.id === fileId); if (item && item.status === 'paused') { item.status = 'uploading'; uploadFile(item); } } // 取消单个项目 function cancelItem(fileId) { var index = uploadQueue.findIndex(item => item.id === fileId); if (index >= 0) { // 通知后端取消上传 cancelUpload(fileId); // 从队列移除 uploadQueue.splice(index, 1); renderQueue(); } } // 合并文件 function mergeFile(fileId) { var xhr = new XMLHttpRequest(); xhr.open('POST', '/api/upload/merge', false); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { console.log('文件合并成功:', xhr.responseText); localStorage.removeItem('resume_' + fileId); } }; xhr.send('fileId=' + encodeURIComponent(fileId) + '&encryption=' + encodeURIComponent(document.getElementById('encryptionType').value)); } // 取消上传 function cancelUpload(fileId) { var xhr = new XMLHttpRequest(); xhr.open('POST', '/api/upload/cancel', false); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.send('fileId=' + encodeURIComponent(fileId)); } // 加载未完成的传输 function loadPendingTransfers() { var xhr = new XMLHttpRequest(); xhr.open('GET', '/api/upload/pending', false); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { var pendingFiles = JSON.parse(xhr.responseText); pendingFiles.forEach(function(fileInfo) { uploadQueue.push({ id: fileInfo.fileId, name: fileInfo.fileName, path: fileInfo.filePath, size: fileInfo.fileSize, progress: fileInfo.progress, status: 'paused' }); }); renderQueue(); } }; xhr.send(); } // 生成文件ID function generateFileId(file) { return file.name + '_' + file.size + '_' + file.lastModified; } // 格式化文件大小 function formatFileSize(bytes) { if (bytes === 0) return '0 B'; var k = 1024; var sizes = ['B', 'KB', 'MB', 'GB', 'TB']; var i = Math.floor(Math.log(bytes) / Math.log(k)); return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]; } // 初始化 window.onload = init;

前端关键功能说明

1. 兼容IE9的黑魔法

• 使用条件注释只对IE9及以下浏览器加载polyfill
• json2.js解决IE9没有JSON对象的问题
• promise-polyfill解决IE9不支持Promise的问题

2. 文件夹上传核心代码

// 文件选择元素添加webkitdirectory和directory属性// 处理文件时保留路径信息functionhandleFiles(files){for(vari=0;i<files.length;i++){varfile=files[i];varfileItem={name:file.name,path:file.webkitRelativePath||'',// 保留相对路径size:file.size// ...};uploadQueue.push(fileItem);}}

3. 断点续传实现

// 上传前检查本地是否有断点记录varresumeChunk=localStorage.getItem('resume_'+fileItem.id)||0;// 上传成功后保存断点localStorage.setItem('resume_'+fileItem.id,chunkIndex+1);// 文件合并成功后清理断点localStorage.removeItem('resume_'+fileItem.id);

4. 加密传输（伪实现）

// 实际项目中应该使用Web Crypto API或相应库formData.append('encryption',document.getElementById('encryptionType').value);formData.append('encryptionKey',document.getElementById('encryptionKey').value);

如何与后端对接

需要后端提供的API接口

1. 分块上传接口

   POST /api/upload/chunk 参数： - fileId: 文件唯一ID - chunkIndex: 当前分块索引 - totalChunks: 总分块数 - fileName: 文件名 - filePath: 文件相对路径（文件夹结构） - fileSize: 文件大小 - chunkData: 分块数据 - encryption: 加密算法 - encryptionKey: 加密密钥

2. 合并文件接口

   POST /api/upload/merge 参数： - fileId: 文件唯一ID - encryption: 加密算法

3. 取消上传接口

   POST /api/upload/cancel 参数： - fileId: 文件唯一ID

4. 获取未完成任务接口

   GET /api/upload/pending 返回： [ { fileId: string, fileName: string, filePath: string, fileSize: number, progress: number } ]

部署注意事项

1. IE9兼容性：

   • 确保服务器正确设置X-UA-Compatible头
   • 添加MIME类型.json application/json

2. 大文件上传：

   • 配置Nginx/Apache的上传大小限制
   • 设置PHP的upload_max_filesize和post_max_size

3. 断点续传：

   • 确保localStorage可用（IE8+支持）
   • 对于隐私模式，需要降级使用cookie存储

4. 加密传输：

   • 实际项目中应该使用HTTPS
   • 前端加密应该使用Web Crypto API或相应polyfill

最后吐槽

1. 100块预算还要兼容IE9？甲方是不是对程序员有什么误解？

2. 20G文件上传？建议先问问甲方他们服务器硬盘够不够大

3. 7x24小时免费技术支持？我连7x24小时睡觉都保证不了…

4. 要源代码？要文档？要一条龙服务？100块连个外卖都点不了好吗！

5. 加群374992201领红包？兄弟，有这功夫不如多接几个项目…

不过既然你都看到这里了，代码拿去用吧，记得请我喝奶茶（至少得是喜茶级别的）！

将组件复制到项目中

示例中已经包含此目录

引入组件

配置接口地址

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

处理事件

启动测试

启动成功

效果

数据库

效果预览

文件上传

文件刷新续传

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

文件夹上传

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

下载示例

点击下载完整示例