前端面试题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等技术来持久化上传信息。