JS实现大文件分片上传&断点续传，超详细教程来了！

还在为大文件上传速度慢、易失败而烦恼吗？本文为你带来一份详尽的JS文件分片上传实战教程，助你轻松解决难题！文章深入讲解如何使用JavaScript实现大文件分片上传，并结合断点续传技术，有效提升上传效率和稳定性。我们将详细介绍前端如何利用FileReader和slice()方法切割文件，以及如何使用fetch或XMLHttpRequest逐个上传分片。同时，还会分享如何通过localStorage记录已上传分片，实现断点续传功能。掌握这些技巧，让你在面对大文件上传时游刃有余，显著优化用户体验。

文件分片上传通过将大文件切分为小块提升上传效率与稳定性。其核心实现步骤如下：1.前端使用FileReader和slice()方法进行文件切割；2.利用fetch或XMLHttpRequest逐个上传分片，并附带分片索引等元数据；3.通过localStorage记录已上传分片实现断点续传，后端需存储并验证分片状态；4.服务器接收所有分片后按序合并成完整文件；5.合理选择4MB-8MB的分片大小以平衡请求次数与失败率；6.上传失败时采用重试机制，设置最大重试次数与延迟间隔；7.监听上传进度事件实现UI实时反馈，从而优化用户体验。

文件分片上传，简单来说，就是把一个大文件切成很多小块，一块一块地传到服务器。这样做的好处显而易见：提升上传速度，降低单次上传失败的风险，还能实现断点续传。

js实现文件分片上传与断点续传，核心在于前端的文件切割、上传控制，以及后端的分片合并。

解决方案

1. 前端文件切割： 使用FileReader API读取文件，然后用slice()方法将文件切割成指定大小的块。

   

   async function sliceFile(file, chunkSize) {
       const chunks = [];
       let offset = 0;
       while (offset < file.size) {
           const chunk = file.slice(offset, offset + chunkSize);
           chunks.push(chunk);
           offset += chunkSize;
       }
       return chunks;
   }

2. 上传分片： 使用XMLHttpRequest或fetch API将每个分片上传到服务器。 每个分片都作为一个独立的请求发送。

   async function uploadChunk(chunk, fileId, chunkIndex, totalChunks) {
       const formData = new FormData();
       formData.append('file', chunk);
       formData.append('fileId', fileId);
       formData.append('chunkIndex', chunkIndex);
       formData.append('totalChunks', totalChunks);
   
       try {
           const response = await fetch('/upload', {
               method: 'POST',
               body: formData,
           });
   
           if (!response.ok) {
               throw new Error(`HTTP error! status: ${response.status}`);
           }
   
           const data = await response.json();
           return data; // 假设后端返回上传结果
       } catch (error) {
           console.error('上传分片失败:', error);
           throw error; // 向上抛出错误，便于后续处理
       }
   }

3. 断点续传： 在上传过程中，记录已上传的分片信息。如果上传中断，下次可以从上次中断的位置继续上传。这需要后端配合，记录已上传的分片。前端也需要存储这些信息，例如使用localStorage。

   // 示例：使用localStorage存储已上传的分片
   function saveUploadedChunk(fileId, chunkIndex) {
       let uploadedChunks = JSON.parse(localStorage.getItem(fileId) || '[]');
       uploadedChunks.push(chunkIndex);
       localStorage.setItem(fileId, JSON.stringify(uploadedChunks));
   }
   
   function getUploadedChunks(fileId) {
       return JSON.parse(localStorage.getItem(fileId) || '[]');
   }

4. 后端分片合并： 服务器接收到所有分片后，按照分片顺序将它们合并成完整的文件。

如何选择合适的分片大小？

分片大小的选择直接影响上传效率和用户体验。 太小的分片会导致过多的请求，增加服务器压力；太大的分片则可能因为网络不稳定导致单次上传失败。一般来说，4MB-8MB是一个比较合适的范围。 实际应用中，可以根据网络环境和文件大小进行调整。

如何处理上传错误和重试机制？

上传过程中，网络波动、服务器故障等都可能导致上传失败。为了提高上传成功率，需要实现错误处理和重试机制。可以设置最大重试次数，每次重试之间增加一定的延迟。 超过最大重试次数后，可以提示用户稍后重试。

async function retryUpload(chunk, fileId, chunkIndex, totalChunks, maxRetries = 3, delay = 1000) {
    let retries = 0;
    while (retries < maxRetries) {
        try {
            return await uploadChunk(chunk, fileId, chunkIndex, totalChunks);
        } catch (error) {
            console.warn(`分片 ${chunkIndex} 上传失败，正在重试 (${retries + 1}/${maxRetries})...`);
            retries++;
            await new Promise(resolve => setTimeout(resolve, delay)); // 延迟一段时间后重试
        }
    }
    throw new Error(`分片 ${chunkIndex} 上传达到最大重试次数，上传失败。`);
}

如何实现上传进度的实时展示？

实时展示上传进度可以显著提升用户体验。 可以通过监听XMLHttpRequest的progress事件，或者fetch API返回的ReadableStream来获取上传进度。 将进度信息更新到UI界面上，让用户了解上传状态。

// 使用 fetch API 监听上传进度
async function uploadWithProgress(chunk, fileId, chunkIndex, totalChunks, progressCallback) {
    const formData = new FormData();
    formData.append('file', chunk);
    formData.append('fileId', fileId);
    formData.append('chunkIndex', chunkIndex);
    formData.append('totalChunks', totalChunks);

    const response = await fetch('/upload', {
        method: 'POST',
        body: formData,
        duplex: 'half', // 允许读取请求体
        signal: AbortSignal.timeout(60000) // 设置超时时间
    });

    if (!response.body) {
        throw new Error('Response body is empty.');
    }

    const reader = response.body.getReader();
    const contentLength = response.headers.get('Content-Length');
    let receivedLength = 0;

    while (true) {
        const { done, value } = await reader.read();

        if (done) {
            break;
        }

        receivedLength += value.length;
        const progress = contentLength ? receivedLength / Number(contentLength) : 0;
        progressCallback(progress); // 调用回调函数更新进度
    }

    if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
    }

    const data = await response.json();
    return data;
}

本篇关于《JS实现大文件分片上传&断点续传，超详细教程来了！》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！