大文件上传Demo及面试要点

news2025/4/25 15:16:36

大文件上传功能实现原理 - 面试解析

在面试中解释大文件上传功能的实现原理时，可以从以下几个方面进行说明：

1. 分片上传 (Chunked Upload)

实现原理 ：

前端将大文件分割为固定大小(如5MB)的多个分片(Chunk)
每个分片独立上传，携带分片索引、总分片数等元数据
后端接收并存储每个分片到临时目录
所有分片上传完成后，前端通知后端合并分片

技术要点 ：

// 前端分片代码示例
const chunk = file.slice(start, end); // 使用slice方法分割文件
formData.append('chunkIndex', chunkIndex); // 携带分片索引

优势：

避免单次上传大文件导致的超时问题
网络中断后可只重传失败分片
可以并行上传多个分片提高速度

2. 断点续传 (Resumable Upload)

实现原理 ：

前端计算文件唯一标识(如文件内容哈希)
上传前先查询服务端已上传的分片信息
只上传缺失的分片，跳过已上传部分
服务端根据文件标识管理分片状态

技术要点 ：

// 文件哈希计算(简化版)
async function calculateFileHash(file) {
    // 实际项目应使用SHA-256等算法
    return `${file.name}-${file.size}`; 
}

// 检查已上传分片
const { uploadedChunks } = await checkUploadedChunks(fileName, fileHash);

优势：

网络中断后可从断点继续上传
避免重复上传已成功分片
提高上传可靠性

3. 进度显示 (Upload Progress)

实现原理 ：

前端记录已上传分片数量和总大小
基于已上传大小和文件总大小计算百分比
通过事件或轮询更新UI进度条

技术要点 ：

// 进度更新函数
function updateProgress() {
    const progress = (uploadedSize / fileSize) * 100;
    progressBar.style.width = `${progress}%`;
}

// 每个分片上传成功后更新
uploadedSize += chunk.size;
updateProgress();

优势：

提供良好的用户体验
让用户了解上传状态和剩余时间

4. 暂停/继续 (Pause/Resume)

实现原理 ：

使用AbortController中止正在进行的上传请求
暂停时保存当前上传状态(已上传分片)
继续时从上次中断的分片开始上传

技术要点 ：

// 创建可中止的请求
controller = new AbortController();
fetch('/api/upload', {
    signal: controller.signal
});

// 暂停上传
controller.abort();

优势：

用户可主动控制上传过程
节省带宽和服务器资源

5. 文件合并 (File Merging)

实现原理 ：

前端在所有分片上传完成后发送合并请求
后端按分片索引顺序读取所有分片
将分片数据按顺序写入最终文件
合并完成后删除临时分片

技术要点 ：

// 后端合并代码示例
chunks.sort((a, b) => a - b); // 按索引排序
for (const chunk of chunks) {
    const data = fs.readFileSync(chunkPath);
    writeStream.write(data); // 顺序写入
}

优势：

确保文件完整性
释放临时存储空间

6. 文件校验 (File Verification)

实现原理 ：

前端计算完整文件的哈希值并随合并请求发送
后端合并完成后重新计算文件哈希
比对两个哈希值确保文件完整性

技术要点 ：

// 建议的哈希校验流程
const clientHash = req.body.fileHash; // 客户端计算的哈希
const serverHash = calculateServerFileHash(finalPath); // 服务端计算

if (clientHash !== serverHash) {
    throw new Error('文件校验失败');
}

优势：

确保上传文件完整无误
防止传输过程中数据损坏

面试回答示例

"我们的大文件上传方案主要解决了传统单次上传大文件时的超时、中断和用户体验问题。核心实现原理包括：

分片上传 ：将文件分割为5MB大小的分片独立上传，避免单次请求过大导致的超时问题。前端使用File API的slice方法分割文件，每个分片携带索引和总数等元数据。
断点续传 ：通过计算文件内容哈希作为唯一标识。上传前先查询服务端已接收的分片，只上传缺失部分。这显著提高了上传的可靠性和效率。
进度控制 ：实时跟踪已上传分片数量和大小，计算并显示上传百分比。同时实现了暂停/继续功能，使用AbortController控制请求中断。
文件合并 ：所有分片上传完成后，服务端按索引顺序合并分片为完整文件。合并前会校验分片数量，合并后删除临时文件释放空间。
错误处理 ：实现了网络中断自动重试、哈希校验等机制确保数据完整性。

这套方案在实际应用中支持了GB级文件的上传，成功率从原来的60%提升到了99%以上，同时提供了良好的用户体验。"

Demo
https://github.com/longjinxiang/fileUploadDemo