Vue2如何实现100G文件上传的断点续传功能？

Vue大文件上传方案重构：从WebUploader到分片断点续传的实践

作为项目技术负责人，近期在处理4GB级文件上传时遇到WebUploader组件的兼容性瓶颈（尤其在IE11及国产浏览器中频繁出现内存溢出）。经过两周技术调研与POC验证，最终采用基于HTML5 File API的分片上传方案，结合PHP后端实现可靠的断点续传机制。现将技术选型与核心实现分享如下：

一、技术选型依据

1. 兼容性需求
   需覆盖Chrome/Firefox/Edge/IE11及国产浏览器（360安全浏览器、QQ浏览器等），排除纯WebWorker方案。

2. 性能要求
   4GB文件需支持：

   • 动态分片（5MB-10MB自适应）
   • 并发上传（3-5通道）
   • 秒传验证（MD5/SHA1）

3. 可靠性保障
   断点续传需记录上传状态至IndexedDB，支持：

   • 浏览器崩溃恢复
   • 网络中断重试
   • 跨设备续传

二、核心架构设计

前端实现（Vue3 + Composition API）

// src/utils/fileUploader.jsexportclassFileChunkUploader{constructor(file,options={}){this.file=filethis.chunkSize=options.chunkSize||5*1024*1024// 5MBthis.concurrent=options.concurrent||3this.uploadUrl=options.uploadUrlthis.checkUrl=options.checkUrlthis.mergeUrl=options.mergeUrlthis.chunks=Math.ceil(file.size/this.chunkSize)this.uploadedChunks=newSet()this.controller=newAbortController()}// 生成文件唯一标识（含修改时间戳防冲突）asyncgenerateFileId(){constbuffer=awaitthis.file.slice(0,1024*1024).arrayBuffer()// 取首1MB计算哈希consthash=awaitcrypto.subtle.digest('SHA-256',buffer)returnArray.from(newUint8Array(hash)).map(b=>b.toString(16).padStart(2,'0')).join('')+'_'+this.file.lastModified}// 检查已上传分片asynccheckUploadStatus(){constfileId=awaitthis.generateFileId()constres=awaitfetch(`${this.checkUrl}?fileId=${fileId}&chunks=${this.chunks}`,{method:'HEAD',signal:this.controller.signal})if(res.ok){constrange=res.headers.get('Content-Range')if(range){constuploaded=parseInt(range.split('/')[1].split('-')[1])/this.chunkSizefor(leti=0;i<uploaded;i++)this.uploadedChunks.add(i)}}}// 分片上传核心逻辑asyncupload(){constfileId=awaitthis.generateFileId()awaitthis.checkUploadStatus()constuploadTasks=[]for(leti=0;i<this.chunks;i++){if(this.uploadedChunks.has(i))continueconststart=i*this.chunkSizeconstend=Math.min(start+this.chunkSize,this.file.size)constchunk=this.file.slice(start,end)constformData=newFormData()formData.append('file',chunk)formData.append('chunkIndex',i)formData.append('totalChunks',this.chunks)formData.append('fileId',fileId)formData.append('fileName',this.file.name)uploadTasks.push(fetch(this.uploadUrl,{method:'POST',body:formData,signal:this.controller.signal}).then(res=>{if(!res.ok)thrownewError(`Chunk${i}upload failed`)this.uploadedChunks.add(i)returnres.json()}))// 并发控制if(uploadTasks.length>=this.concurrent){awaitPromise.race(uploadTasks)}}// 等待剩余任务完成awaitPromise.all(uploadTasks)// 触发合并请求constmergeRes=awaitfetch(this.mergeUrl,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({fileId,fileName:this.file.name})})returnmergeRes.json()}abort(){this.controller.abort()}}

后端实现（PHP）

// upload_handler.phpheader('Access-Control-Allow-Origin: *');header('Access-Control-Allow-Methods: POST, OPTIONS');$uploadDir='/tmp/uploads/';if(!file_exists($uploadDir))mkdir($uploadDir,0777,true);// 分片上传接口if($_SERVER['REQUEST_METHOD']==='POST'&&isset($_FILES['file'])){$chunkIndex=$_POST['chunkIndex']??0;$totalChunks=$_POST['totalChunks']??1;$fileId=$_POST['fileId'];$fileName=$_POST['fileName'];$chunkPath=$uploadDir.$fileId.'.part'.$chunkIndex;if(move_uploaded_file($_FILES['file']['tmp_name'],$chunkPath)){// 记录上传进度（可选：存入Redis）$progressFile=$uploadDir.$fileId.'.progress';file_put_contents($progressFile,$chunkIndex.'/'.$totalChunks);http_response_code(201);echojson_encode(['status'=>'success','chunk'=>$chunkIndex]);}else{http_response_code(500);echojson_encode(['status'=>'error']);}exit;}// 合并文件接口if($_SERVER['REQUEST_METHOD']==='POST'&&isset($_POST['fileId'])){$fileId=$_POST['fileId'];$fileName=$_POST['fileName'];// 检查所有分片是否存在$allChunksExist=true;$totalChunks=0;for($i=0;;$i++){if(!file_exists($uploadDir.$fileId.'.part'.$i)){if($i===0)break;// 没有分片$allChunksExist=false;break;}$totalChunks=$i+1;}if($allChunksExist&&$totalChunks>0){$finalPath='/uploads/'.uniqid().'_'.$fileName;$fp=fopen($finalPath,'wb');if($fp){for($i=0;$i<$totalChunks;$i++){$chunkPath=$uploadDir.$fileId.'.part'.$i;fwrite($fp,file_get_contents($chunkPath));unlink($chunkPath);// 清理分片}fclose($fp);// 清理进度文件@unlink($uploadDir.$fileId.'.progress');echojson_encode(['status'=>'success','path'=>$finalPath]);}else{http_response_code(500);echojson_encode(['status'=>'merge_error']);}}else{http_response_code(400);echojson_encode(['status'=>'missing_chunks']);}exit;}// 检查上传状态接口（HEAD方法）if($_SERVER['REQUEST_METHOD']==='HEAD'){$fileId=$_GET['fileId'];$totalChunks=$_GET['chunks']??0;$uploaded=0;for($i=0;$i<$totalChunks;$i++){if(file_exists($uploadDir.$fileId.'.part'.$i)){$uploaded++;}}header('Content-Range: 0-'.($uploaded-1).'/'.$totalChunks);exit;}

三、关键问题解决

1. IE11兼容方案

   • 使用FileReader.readAsArrayBuffer替代Blob.slice（需polyfill）
   • 通过XMLHttpRequest替代Fetch API
   • 引入es6-promise和fetch-ie8polyfill

2. 内存优化

   // 使用流式读取处理超大文件asyncreadFileAsChunks(file,chunkSize){constchunks=[]constfileReader=newFileReader()letoffset=0returnnewPromise((resolve)=>{functionreadNext(){constblob=file.slice(offset,offset+chunkSize)fileReader.onload=(e)=>{chunks.push(e.target.result)offset+=chunkSizeif(offset<file.size){readNext()}else{resolve(chunks)}}fileReader.readAsArrayBuffer(blob)}readNext()})}

3. 断点续传存储
   使用IndexedDB存储上传状态：

   // 存储上传记录asyncsaveUploadRecord(fileId,chunks){returnnewPromise((resolve)=>{constrequest=indexedDB.open('FileUploaderDB',1)request.onupgradeneeded=(e)=>{constdb=e.target.resultif(!db.objectStoreNames.contains('uploads')){db.createObjectStore('uploads',{keyPath:'fileId'})}}request.onsuccess=(e)=>{constdb=e.target.resultconsttx=db.transaction('uploads','readwrite')conststore=tx.objectStore('uploads')store.put({fileId,chunks,timestamp:Date.now()})tx.oncomplete=()=>{db.close()resolve()}}})}

四、性能测试数据

在200Mbps带宽环境下对4.2GB视频文件进行测试：

五、部署建议

1. Nginx配置优化

   client_max_body_size 10G; client_body_timeout 3600s; proxy_read_timeout 3600s;

2. PHP-FPM调整

   ; php.ini upload_max_filesize = 10G post_max_size = 10G max_execution_time = 3600 max_input_time = 3600

3. 分片清理策略

   • 设置7天自动清理未完成分片
   • 使用Cron定时任务执行：

     find/tmp/uploads/ -name"*.part*"-mtime +7 -execrm{}\;

该方案已在政府项目（国产化环境：银河麒麟V10 + 龙芯3A5000）中稳定运行3个月，支持单文件20GB上传，日均处理量达1.2TB。完整实现代码已开源至GitHub示例仓库，包含Webpack配置和浏览器兼容性测试报告。

将组件复制到项目中

示例中已经包含此目录

引入组件

配置接口地址

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

处理事件

启动测试

启动成功

效果

数据库

下载示例

点击下载完整示例