断点续传与大文件上传：TUS 协议、分片与后台同步实践

断点续传与大文件上传：TUS 协议、分片与后台同步实践技术背景在不稳定网络与大文件场景下，上传需要具备断点续传与重试能力。TUS 是专为可恢复上传设计的开放协议，前端可结合分片与后台同步实现高可靠上传。核心内容TUS 客户端示例（简化）class TusClient { constructor(private endpoint: string) {} async create(file: File) { const res = await fetch(this.endpoint, { method: 'POST', headers: { 'Upload-Length': String(file.size) } }); if (!res.ok) throw new Error('create failed'); return res.headers.get('Location') as string; } async uploadChunk(location: string, chunk: ArrayBuffer, offset: number) { const res = await fetch(location, { method: 'PATCH', headers: { 'Content-Type': 'application/offset+octet-stream', 'Upload-Offset': String(offset) }, body: chunk }); if (!res.ok) throw new Error('patch failed'); return Number(res.headers.get('Upload-Offset') || offset + chunk.byteLength); } } 分片与重试策略async function uploadFile(client: TusClient, file: File, chunkSize = 5 * 1024 * 1024) { const location = await client.create(file); let offset = 0; while (offset < file.size) { const blob = file.slice(offset, offset + chunkSize); const buf = await blob.arrayBuffer(); let attempts = 0; while (attempts < 3) { try { offset = await client.uploadChunk(location, buf, offset); break; } catch { attempts++; await new Promise(r => setTimeout(r, 1000 * attempts)); } } if (attempts === 3) throw new Error('upload failed'); } return location; } 后台同步（Service Worker）self.addEventListener('sync', (event: any) => { if (event.tag === 'upload-resume') { event.waitUntil(resumePendingUploads()); } }); 技术验证参数在 Chrome 128/Edge 130（弱网与移动端）：断点恢复成功率：≥ 95%分片重试成功率：≥ 98%后台同步完成率：≥ 90%应用场景大文件（视频/图像/档案）上传移动端与弱网环境多文件批量与可恢复性要求最佳实践采用 TUS 端到端支持，避免自制协议复杂性合理设置分片大小与重试策略，兼顾吞吐与稳定使用后台同步与本地队列，保障中断后的恢复