前端实现大文件分片并行上传、断点续传、秒传（完整解析）

在现代Web应用中，处理大文件上传是一项常见且重要的需求。大文件上传往往会由于网络中断、性能等问题而导致失败，因此实现分片上传、断点续传和秒传机制显得尤为重要。以下我们将详细解析如何在前端实现大文件的分片并行上传、断点续传，以及秒传功能。

一、基本概念

1. 分片上传：将大文件分成多个小块（片），逐个上传。这种方法不仅提高了上传的效率，也避免了因网络问题导致整个上传失败。

2. 断点续传：如果上传过程中出现问题，可以从上次中断的地方继续上传，而不是从头开始。

3. 秒传：如果服务器端已经存在相同文件的某个片段，则可以直接确认上传，不必再传输该片段，从而提升上传速度。

二、实现步骤

1. 文件分片

首先，我们需要将大文件分成多个小片。以下是一个简单的示例：

function createChunks(file, chunkSize) {
    const chunks = [];
    let start = 0;
    while (start < file.size) {
        const end = Math.min(start + chunkSize, file.size);
        chunks.push(file.slice(start, end));
        start = end;
    }
    return chunks;
}

调用方式：

const file = document.getElementById('fileInput').files[0];
const chunkSize = 1024 * 1024; // 每片1MB
const chunks = createChunks(file, chunkSize);

2. 分片上传

我们可以利用Fetch API或者Axios等库来进行分片的上传。此处以Fetch为例：

async function uploadChunk(chunk, index, totalChunks) {
    const formData = new FormData();
    formData.append('fileChunk', chunk);
    formData.append('chunkIndex', index);
    formData.append('totalChunks', totalChunks);

    const response = await fetch('/upload', {
        method: 'POST',
        body: formData,
    });

    return response.ok;
}

3. 断点续传

为了实现断点续传，我们需要在每次上传时记录已经成功上传的片段。例如，可以将上传状态保存到localStorage中：

function getUploadedChunks(totalChunks) {
    const uploaded = JSON.parse(localStorage.getItem('uploadedChunks')) || [];
    return uploaded.slice(0, totalChunks);
}

在上传时检查上传状态：

async function uploadFile(file) {
    const chunks = createChunks(file, chunkSize);
    const totalChunks = chunks.length;
    const uploadedChunks = getUploadedChunks(totalChunks);

    for (let i = 0; i < totalChunks; i++) {
        if (!uploadedChunks.includes(i)) {
            const success = await uploadChunk(chunks[i], i, totalChunks);
            if (success) {
                uploadedChunks.push(i);
                localStorage.setItem('uploadedChunks', JSON.stringify(uploadedChunks));
            } else {
                // 上传失败处理
                break;
            }
        }
    }
}

4. 秒传功能

秒传的实现依赖于服务器端的配合。我们可以在上传前将文件的MD5哈希值计算出来，并将其发送到服务器端。在服务器端检查该哈希值是否已存在：

async function checkFileExists(file) {
    const hash = await calculateFileHash(file); // 实现文件哈希计算
    const response = await fetch(`/check-file?hash=${hash}`);
    return response.ok;
}

在上传之前调用此检查函数：

async function uploadFile(file) {
    const exists = await checkFileExists(file);
    if (exists) {
        alert('文件已存在，无需上传');
        return;
    }
    // 继续执行分片上传
}

三、总结

通过以上的步骤，我们实现了前端的大文件分片并行上传、断点续传和秒传功能。这种方法有效地提高了大文件的上传成功率和效率。需要注意的是，以上代码示例仅为简化版本，实际应用中还需要考虑错误处理、状态反馈等细节。希望通过这篇文章，能够帮助你在项目中实现高效的文件上传功能。