大文件上傳如何做斷點續(xù)傳？

在前端實現(xiàn)大文件上傳的斷點續(xù)傳，通常會將文件切片并分塊上傳，記錄每塊的上傳狀態(tài)，以便在中斷或失敗時只上傳未完成的部分。以下是實現(xiàn)斷點續(xù)傳的主要步驟和思路：

1. 文件切片 (File Slicing)
使用 JavaScript 的 `Blob.slice()` 方法將大文件分割成小塊。

const chunkSize = 5 * 1024 * 1024; // 每塊大小為5MB，可根據(jù)需求調(diào)整
const file = document.getElementById("fileInput").files[0];
const chunks = Math.ceil(file.size / chunkSize); // 計算塊數(shù)
let currentChunk = 0;function getNextChunk() {const start = currentChunk * chunkSize;const end = Math.min(start + chunkSize, file.size);return file.slice(start, end); // 獲取當前塊
}

2. 上傳塊并記錄進度
使用 `FormData` 攜帶每一塊的內(nèi)容和其他信息（如塊序號、文件標識等）發(fā)送到后端。

async function uploadChunk() {const chunk = getNextChunk();const formData = new FormData();formData.append("fileChunk", chunk);formData.append("chunkIndex", currentChunk); // 當前塊序號formData.append("fileId", fileId); // 文件唯一標識，生成方法可用哈希、UUID等try {await fetch('/upload', { method: 'POST', body: formData });console.log(`Chunk ${currentChunk + 1}/${chunks} uploaded`);currentChunk++;if (currentChunk < chunks) {await uploadChunk(); // 遞歸上傳下一塊} else {console.log('File uploaded successfully');}} catch (err) {console.error(`Chunk ${currentChunk + 1} upload failed`, err);}
}

3. 實現(xiàn)斷點續(xù)傳
在上傳前先檢查已上傳的塊，避免重復(fù)上傳。這里可以借助 `localStorage` 或其他方式記錄進度，或者由后端返回未完成的塊序號列表。

// 示例：從服務(wù)端獲取已上傳的塊
async function getUploadedChunks(fileId) {const response = await fetch(`/uploaded-chunks?fileId=${fileId}`);const uploadedChunks = await response.json();return new Set(uploadedChunks);
}async function startUpload() {const uploadedChunks = await getUploadedChunks(fileId);while (currentChunk < chunks) {if (uploadedChunks.has(currentChunk)) {console.log(`Skipping chunk ${currentChunk + 1} as it’s already uploaded`);currentChunk++;} else {await uploadChunk(); // 上傳未完成的塊}}
}

4. 文件合并
全部塊上傳完成后，通知后端合并文件。前端可以發(fā)送一個 `finish` 請求，告知后端可以合并分塊。

// 合并請求示例
async function mergeChunks() {await fetch(`/merge?fileId=${fileId}`, { method: 'POST' });console.log("File merge initiated on server.");
}

總結(jié)
1. **文件切片**：將文件分成小塊。
2. **上傳和進度跟蹤**：逐塊上傳并記錄上傳狀態(tài)。
3. **斷點續(xù)傳**：通過已上傳塊序號跳過已完成部分。
4. **文件合并**：所有塊上傳完成后，通知后端合并文件。

這種方式不僅可以實現(xiàn)斷點續(xù)傳，還能提高大文件上傳的穩(wěn)定性和容錯率。