当前位置：首页 > backend >正文

前端实现大文件分片上传：原理、实现与优化

backend 2025/7/18 15:19:27

在日常开发中，我们常常遇到需要上传大文件（如视频、安装包、数据文件等）的场景。传统的文件上传方式在处理大文件时容易出现请求超时、网络中断导致上传失败等问题。为了解决这些问题，分片上传（Chunk Upload） 成为前端开发的重要解决方案之一。

本文将介绍如何通过前端技术实现大文件的分片上传，并结合实际代码讲解核心逻辑和优化方案。

一、什么是分片上传？

分片上传是将大文件切分成若干小块（chunk），每一块单独上传到服务器。上传过程中可以实现断点续传、进度监控、并发控制等功能，提高上传的稳定性与用户体验。

主要步骤如下：

将大文件切成小块；
每个小块依次或并发上传；
后端接收所有小块并合并成完整文件；
可选支持断点续传、秒传等优化。

二、前端分片上传实现步骤

1. 切片文件

我们使用 Blob.slice 对文件进行切片：

function createFileChunks(file, chunkSize = 5 * 1024 * 1024) { // 默认每块5MBconst chunks = [];let cur = 0;while (cur < file.size) {chunks.push({index: chunks.length,chunk: file.slice(cur, cur + chunkSize)});cur += chunkSize;}return chunks;
}

2. 计算文件唯一标识（hash）

可用于实现断点续传、秒传等功能，通常使用 SparkMD5 进行计算：

npm install spark-md5

import SparkMD5 from 'spark-md5';async function calculateHash(chunks) {return new Promise(resolve => {const spark = new SparkMD5.ArrayBuffer();let count = 0;const loadNext = index => {const reader = new FileReader();reader.readAsArrayBuffer(chunks[index].chunk);reader.onload = () => {spark.append(reader.result);count++;if (count < chunks.length) {loadNext(count);} else {resolve(spark.end());}};};loadNext(0);});
}

3. 上传切片

每个切片通过 FormData 发给服务器：

async function uploadChunks(chunks, hash) {const requests = chunks.map(({ chunk, index }) => {const formData = new FormData();formData.append('file', chunk);formData.append('hash', hash);formData.append('index', index);return fetch('/upload_chunk', {method: 'POST',body: formData});});await Promise.all(requests);
}

4. 通知服务端合并文件

上传完毕后，前端发请求通知服务器合并切片：

async function mergeChunks(hash, totalChunks) {await fetch('/merge_chunks', {method: 'POST',headers: { 'Content-Type': 'application/json' },body: JSON.stringify({ hash, totalChunks })});
}

5. 完整流程整合

async function handleUpload(file) {const chunks = createFileChunks(file);const hash = await calculateHash(chunks);await uploadChunks(chunks, hash);await mergeChunks(hash, chunks.length);
}

三、后端配合（简要说明）

后端需要实现：

/upload_chunk 接收每个分片，保存到临时目录；
/merge_chunks 接收合并指令，根据 hash 和 index 将文件拼接起来；
（可选）/check_chunk 检查哪些分片已上传，支持断点续传。

四、优化建议

1. 并发控制

可使用 Promise.all 或 p-limit 实现最大并发数控制，避免并发过高导致浏览器崩溃：

import pLimit from 'p-limit';const limit = pLimit(5); // 同时最多5个请求const tasks = chunks.map(({ chunk, index }) =>limit(() => uploadChunk(chunk, index, hash))
);
await Promise.all(tasks);