VScode插件：前端每日一题

大文件上传如何做断点续传？

在前端实现大文件上传的断点续传，通常会将文件切片并分块上传，记录每块的上传状态，以便在中断或失败时只上传未完成的部分。以下是实现断点续传的主要步骤和思路：

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

const chunkSize = 5 * 1024 * 1024; // 每块大小为5MB，可根据需求调整
const file = document.getElementById("fileInput").files[0];
const chunks = Math.ceil(file.size / chunkSize); // 计算块数
let currentChunk = 0;function getNextChunk() {const start = currentChunk * chunkSize;const end = Math.min(start + chunkSize, file.size);return file.slice(start, end); // 获取当前块
}

2. 上传块并记录进度
使用 `FormData` 携带每一块的内容和其他信息（如块序号、文件标识等）发送到后端。

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. 实现断点续传
在上传前先检查已上传的块，避免重复上传。这里可以借助 `localStorage` 或其他方式记录进度，或者由后端返回未完成的块序号列表。

// 示例：从服务端获取已上传的块
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. 文件合并
全部块上传完成后，通知后端合并文件。前端可以发送一个 `finish` 请求，告知后端可以合并分块。

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

总结
1. **文件切片**：将文件分成小块。
2. **上传和进度跟踪**：逐块上传并记录上传状态。
3. **断点续传**：通过已上传块序号跳过已完成部分。
4. **文件合并**：所有块上传完成后，通知后端合并文件。

这种方式不仅可以实现断点续传，还能提高大文件上传的稳定性和容错率。