当前位置：首页 > news >正文

HTML5利用Vue2实现大文件分片上传的进度监控界面？

news 2026/6/3 15:05:37

大文件上传方案探索：从WebUploader到自定义分片上传的实践

作为一名前端开发工程师，最近遇到了一个颇具挑战性的需求：需要在Vue项目中实现4GB左右大文件的稳定上传，且要兼容Chrome、Firefox、Edge等主流浏览器，后端使用PHP接收。此前我们采用了百度开源的WebUploader组件，但在实际使用中遇到了几个难以解决的问题：

分片上传过程中偶尔会出现断点续传失效的情况
对新版浏览器的兼容性不够理想
缺乏官方技术支持，社区活跃度下降
自定义UI的灵活性不足

方案选型思考

经过技术调研，我评估了以下几个主流方案：

Plupload：功能全面但文档不够友好，对Vue集成支持一般
Uppy：现代感强但体积较大，学习曲线较陡
Resumable.js：专注分片上传但UI较为基础
自定义实现：基于XMLHttpRequest/Fetch API实现核心分片逻辑

最终决定采用自定义分片上传方案，主要基于以下考虑：

完全控制上传流程
可以针对业务需求深度优化
减少第三方依赖，降低维护成本
与Vue生态无缝集成

核心实现思路

1. 前端分片策略

// 文件分片工具函数constchunkFile=(file,chunkSize=5*1024*1024)=>{constchunks=[]letcurrent=0while(current<file.size){chunks.push({file:file.slice(current,current+chunkSize),chunkIndex:chunks.length,totalChunks:Math.ceil(file.size/chunkSize),fileName:file.name,fileSize:file.size,fileType:file.type,fileLastModified:file.lastModified,identifier:generateFileIdentifier(file)// 生成唯一标识用于断点续传})current+=chunkSize}returnchunks}// 生成文件唯一标识（基于文件内容）constgenerateFileIdentifier=(file)=>{returnnewPromise((resolve)=>{constreader=newFileReader()reader.onload=(e)=>{constarr=newUint8Array(e.target.result)consthashArray=Array.from(arr).map(b=>b.toString(16).padStart(2,'0'))resolve(hashArray.join('').substring(0,16))}reader.readAsArrayBuffer(file.slice(0,1024*1024))// 取前1MB计算哈希})}

2. Vue组件实现

export default { data() { return { file: null, chunks: [], uploadStatus: 'idle', // idle, uploading, paused, completed, error progress: 0, error: null, currentChunk: 0, abortController: null } }, methods: { async handleFileChange(e) { this.file = e.target.files[0] if (!this.file) return // 生成文件标识（简化版，实际项目应使用更可靠的算法） const identifier = await this.generateSimpleIdentifier(this.file) // 检查服务器是否有未完成的上传记录 const res = await this.checkUploadStatus(identifier) if (res.exists) { if (confirm('检测到未完成的上传，是否继续？')) { this.currentChunk = res.uploadedChunks } else { // 清除服务器记录（实际项目应实现） } } this.chunks = this.chunkFile(this.file) this.progress = Math.round((this.currentChunk / this.chunks.length) * 100) }, async startUpload() { if (!this.file) return this.uploadStatus = 'uploading' this.error = null this.abortController = new AbortController() try { for (let i = this.currentChunk; i < this.chunks.length; i++) { if (this.uploadStatus !== 'uploading') break // 处理暂停情况 const chunk = this.chunks[i] const formData = new FormData() formData.append('file', chunk.file) formData.append('chunkIndex', chunk.chunkIndex) formData.append('totalChunks', chunk.totalChunks) formData.append('fileName', chunk.fileName) formData.append('fileSize', chunk.fileSize) formData.append('fileType', chunk.fileType) formData.append('identifier', chunk.identifier) await this.uploadChunk(formData) this.currentChunk = i + 1 this.progress = Math.round(((i + 1) / this.chunks.length) * 100) } if (this.uploadStatus === 'uploading') { await this.mergeChunks(this.chunks[0].identifier, this.chunks[0].fileName) this.uploadStatus = 'completed' this.$emit('upload-complete') } } catch (err) { console.error('上传失败:', err) this.error = err.message || '上传过程中出现错误' this.uploadStatus = 'error' } }, async uploadChunk(formData) { return fetch('/api/upload-chunk.php', { method: 'POST', body: formData, signal: this.abortController.signal }) }, async mergeChunks(identifier, fileName) { return fetch('/api/merge-chunks.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ identifier, fileName }) }) }, // 简化版标识生成（实际项目应使用更可靠的算法） generateSimpleIdentifier(file) { return `${file.name}-${file.size}-${file.lastModified}` }, async checkUploadStatus(identifier) { // 实际项目应实现与后端的交互 return { exists: false, uploadedChunks: 0 } }, pauseUpload() { if (this.uploadStatus === 'uploading') { this.abortController.abort() this.uploadStatus = 'paused' } }, resumeUpload() { if (this.uploadStatus === 'paused') { this.startUpload() } } } }

3. PHP后端实现要点

$chunkIndex,'totalChunks'=>$totalChunks,'fileName'=>$fileName,'uploaded'=>time()]));echojson_encode(['status'=>'success']);}else{http_response_code(500);echojson_encode(['status'=>'error','message'=>'Failed to save chunk']);}// merge-chunks.php - 合并分片header('Content-Type: application/json');$uploadDir='/path/to/upload/dir/';$tempDir=$uploadDir.'temp/';$data=json_decode(file_get_contents('php://input'),true);$identifier=$data['identifier']??'';$fileName=$data['fileName']??'';// 检查标识符和文件名if(empty($identifier)||empty($fileName)){http_response_code(400);echojson_encode(['status'=>'error','message'=>'Invalid parameters']);exit;}// 检查上传状态文件$statusFile=$tempDir.$identifier.'.upload';if(!file_exists($statusFile)){http_response_code(404);echojson_encode(['status'=>'error','message'=>'Upload not found']);exit;}$status=json_decode(file_get_contents($statusFile),true);$totalChunks=$status['totalChunks']??0;// 合并文件$finalPath=$uploadDir.$fileName;if($fp=fopen($finalPath,'wb')){for($i=0;$i<$totalChunks;$i++){$chunkPath=$tempDir.$identifier.'_'.$i;if(!file_exists($chunkPath)){fclose($fp);unlink($finalPath);// 删除已创建的部分文件http_response_code(400);echojson_encode(['status'=>'error','message'=>'Missing chunk '.$i]);exit;}$content=file_get_contents($chunkPath);fwrite($fp,$content);unlink($chunkPath);// 删除已合并的分片}fclose($fp);// 删除状态文件unlink($statusFile);echojson_encode(['status'=>'success','path'=>$finalPath]);}else{http_response_code(500);echojson_encode(['status'=>'error','message'=>'Failed to create final file']);}?>