摘要：你说的前端上传切片优化以及实现，主要涉及到大文件分片上传（chunk upload）、并发控制、断点续传、秒传、重试机制等。下面我给你梳理一下实现思路和优化点。
你说的 前端上传切片优化以及实现，主要涉及到大文件分片上传（chunk upload）、并发控制、断点续传、秒传、重试机制等。下面我给你梳理一下实现思路和优化点。
文件切片使用 Blob.slice 方法将文件分割为固定大小的分片（比如 2MB/5MB）。function createFileChunks(file: File, chunkSize = 2 * 1024 * 1024) { const chunks: Blob = ; let cur = 0; while (cur 计算文件唯一标识（Hash）
通常用 MD5/SHA1 或者基于文件名 + 大小 + 上次修改时间。
可以在浏览器端用 spark-md5：import SparkMD5 from "spark-md5"; async function calculateHash(chunks: Blob) { const spark = new SparkMD5.ArrayBuffer; for (const chunk of chunks) { const buffer = await chunk.arrayBuffer; spark.append(buffer); } return spark.end; // 文件hash }上传分片
每个分片通过 FormData 上传：async function uploadChunk(chunk: Blob, index: number, fileHash: string) { const formData = new FormData; formData.append("chunk", chunk); formData.append("index", String(index)); formData.append("fileHash", fileHash); return fetch("/upload", { method: "POST", body: formData, }); }合并文件
前端所有分片上传完成后，调用后端 /merge 接口，通知服务端进行文件合并。并发控制
使用 Promise.all 并发上传，但需要限制最大并发数：async function limitUpload(chunks, limit = 5) { const pool: Promise = ; let i = 0; async function run { if (i >= chunks.length) return; const task = uploadChunk(chunks[i], i, "fileHash").then(run); pool.push(task); i++; } const workers = Array(limit).fill(null).map(run); await Promise.all(workers); }断点续传上传前向服务端查询已上传的分片列表。跳过已完成的分片，仅上传剩余分片。秒传上传前计算 hash。询问服务端该文件是否已存在，存在则直接返回成功。失败重试针对失败的分片，做 最多 N 次重试。async function retry(fn, retries = 3) { while (retries--) { try { return await fn; } catch (e) { if (!retries) throw e; } } }上传进度显示每个分片上传时用 XMLHttpRequest.onprogress 或 fetch + ReadableStream 计算进度。进度 = 已上传分片大小 / 总文件大小。
来源：微迅科技
