前端面试题54（断点续传讲解）

断点续传是一种在上传或下载大文件时，如果因为网络问题中断，可以从已经上传或下载的部分继续，而不是重新开始的技术。这对于提高用户体验和节省带宽非常有帮助。下面我将分别从HTTP协议层面、前端实现思路以及一个简单的前端实现示例来讲解断点续传。

HTTP协议支持

断点续传主要依赖于HTTP协议中的两个头部字段：

1. Range: 用于请求指定资源的某个范围。格式如 Range: bytes=start-end，其中start和end表示字节范围。
2. Content-Range: 服务器响应时使用，告诉客户端这个响应包含的资源范围，格式如 Content-Range: bytes start-end/fileSize。

前端实现思路

1. 初始化检查：首先检查文件是否已部分上传，如果存在之前上传的记录，则获取已上传的字节范围。
2. 分片处理：将大文件切分为多个小块（分片），每个分片独立上传。
3. 发送Range请求：对于每个分片，在上传前发送一个HEAD请求检查该分片是否已存在于服务器，如果已存在则不需要上传；如果未完成，则使用Range头指定要上传的字节范围发送POST或PUT请求。
4. 记录上传进度：在上传过程中，记录每个分片的上传状态，以便于失败后重试或中断后续传。
5. 合并文件（服务端操作）：服务端需要支持接收并合并这些分片，确保最终组合成完整的文件。

简单前端实现示例（使用Fetch API）

以下是一个简化的前端JavaScript示例，演示了如何使用Fetch API进行断点续传的分片上传。注意，这仅是一个基础示例，实际应用中需要考虑更多细节，比如错误处理、进度显示等。

async function uploadFileInChunks(file, chunkSize = 1024 * 1024, resumePoint = 0) {const fileSize = file.size;const chunks = Math.ceil(fileSize / chunkSize);let uploadedBytes = resumePoint;for (let i = 0; i < chunks; i++) {const start = i * chunkSize + resumePoint;const end = (i + 1) * chunkSize - 1 < fileSize ? (i + 1) * chunkSize - 1 : fileSize;const chunk = file.slice(start, end + 1);const formData = new FormData();formData.append('file', chunk, file.name);formData.append('startByte', start);formData.append('endByte', end);try {const response = await fetch('/upload', {method: 'POST',headers: {// 这里通常不需要设置Range，因为是通过formData传递起始结束位置// 'Range': `bytes ${start}-${end}/${fileSize}`,},body: formData,});if (!response.ok) {throw new Error(`Upload failed with status ${response.status}`);}// 更新已上传字节数，这里假设服务器会返回已成功处理的字节范围// 实际应用中需要根据服务器响应处理uploadedBytes = end + 1;console.log(`Chunk ${i + 1} of ${chunks} uploaded.`);} catch (error) {console.error(`Error uploading chunk ${i + 1}: `, error);// 处理错误逻辑，可能需要重试或记录错误break;}}console.log('File upload complete.');
}// 使用示例
const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', async (event) => {const file = event.target.files[0];await uploadFileInChunks(file);
});

请注意，此示例中服务器端的实现同样重要，需要能够正确处理带有startByte和endByte参数的POST请求，并且能够存储和合并这些分片。此外，为了实现真正的断点续传，前端还需要有机制存储每个文件上传的状态，以便在页面刷新或意外中断后恢复上传。这通常涉及到浏览器的LocalStorage或IndexedDB等技术来持久化上传信息。