前端如何处理大文件上传

创作时间:

作者:

@小白创作中心

前端如何处理大文件上传

引用

来源

https://docs.pingcode.com/baike/2454496

在前端开发中，处理大文件上传是一个常见的需求，但也是一个具有挑战性的任务。本文将详细介绍如何通过分块上传、进度显示、断点续传等技术手段，优化大文件上传的性能和用户体验。

前端处理大文件上传的最佳实践包括：分块上传、进度显示、断点续传、优化用户体验。其中，分块上传是最常用且有效的方法之一，因为它可以将大文件分成更小的部分上传，减少单个请求的大小，避免网络波动带来的影响，并能更方便地实现断点续传功能。

一、分块上传

分块上传是一种将大文件分成多个较小块进行上传的技术。这种方法不仅能有效减少单个请求的大小，还可以提高上传的稳定性，避免因为网络波动导致整个文件上传失败。

实现原理

分块上传的核心在于将大文件按一定大小分割成多个小块，并逐块上传到服务器。服务器端会将这些小块重新组装成完整的文件。

具体步骤

文件分割：将大文件按设定的块大小分割成多个小块。
逐块上传：依次上传每个分块，上传时可以带上块序号和文件唯一标识。
服务端处理：服务器接收到分块后，保存并记录块序号，待所有分块上传完成后，进行合并。

代码实现

下面是一个简单的示例，使用JavaScript实现分块上传：

const uploadFileInChunks = async (file) => {
    const chunkSize = 2 * 1024 * 1024; // 2MB
    const totalChunks = Math.ceil(file.size / chunkSize);
    for (let i = 0; i < totalChunks; i++) {
        const start = i * chunkSize;
        const end = Math.min(file.size, start + chunkSize);
        const chunk = file.slice(start, end);
        const formData = new FormData();
        formData.append('chunk', chunk);
        formData.append('chunkNumber', i + 1);
        formData.append('totalChunks', totalChunks);
        await fetch('/upload', {
            method: 'POST',
            body: formData
        });
    }
};

二、进度显示

进度显示是用户体验优化的重要方面之一。用户可以通过进度条或百分比来实时了解上传进度，从而减少等待过程中的焦虑感。

实现原理

浏览器提供了XMLHttpRequest对象的progress事件，可以用来监听上传进度。通过计算已上传的字节数与总字节数的比例，即可得到上传进度。

具体步骤

监听progress事件：在上传文件时，添加progress事件监听器。
计算进度：在progress事件触发时，计算已上传字节数与总字节数的比例。
更新UI：根据计算出的比例，更新UI中的进度条或百分比显示。

代码实现

下面是一个简单的示例，使用XMLHttpRequest实现进度显示：

const uploadFileWithProgress = (file) => {
    const xhr = new XMLHttpRequest();
    xhr.open('POST', '/upload', true);
    xhr.upload.onprogress = (event) => {
        if (event.lengthComputable) {
            const percentComplete = (event.loaded / event.total) * 100;
            console.log(`Upload progress: ${percentComplete.toFixed(2)}%`);
            // 更新UI进度条或百分比显示
        }
    };
    const formData = new FormData();
    formData.append('file', file);
    xhr.send(formData);
};

三、断点续传

断点续传是指在上传过程中断后，可以从中断的地方继续上传，而不是重新开始。它对于大文件上传特别有用，因为可以节省时间和带宽。

实现原理

断点续传的核心在于记录已上传的部分，当上传中断后，可以从中断的地方继续上传。需要在客户端和服务器端都实现相应的逻辑。

具体步骤

记录上传进度：在客户端记录已上传的分块信息。
上传时检查进度：在每次上传时，检查服务器端已有的分块信息，从未上传的分块开始上传。
服务器端记录：服务器端需要记录已上传的分块信息，以便在继续上传时知道从哪里开始。

代码实现

下面是一个简单的示例，使用本地存储和服务器记录实现断点续传：

const uploadFileWithResume = async (file) => {
    const chunkSize = 2 * 1024 * 1024; // 2MB
    const totalChunks = Math.ceil(file.size / chunkSize);
    const fileId = 'unique-file-id'; // 可以使用文件哈希或其他方法生成唯一ID
    let uploadedChunks = JSON.parse(localStorage.getItem(fileId)) || [];
    for (let i = 0; i < totalChunks; i++) {
        if (uploadedChunks.includes(i)) continue;
        const start = i * chunkSize;
        const end = Math.min(file.size, start + chunkSize);
        const chunk = file.slice(start, end);
        const formData = new FormData();
        formData.append('chunk', chunk);
        formData.append('chunkNumber', i + 1);
        formData.append('totalChunks', totalChunks);
        formData.append('fileId', fileId);
        await fetch('/upload', {
            method: 'POST',
            body: formData
        });
        uploadedChunks.push(i);
        localStorage.setItem(fileId, JSON.stringify(uploadedChunks));
    }
};