推荐|分片上传技术全解析：原理、优势与应用（含简单实现源码）

作者：watermelo617

涉及领域：Vue、SpingBoot、Docker、LLM、python

-------------------------------------------------------------------------------------------------------------------------

--------------------------温柔地对待温柔的人，包容的三观就是最大的温柔。--------------------------

-------------------------------------------------------------------------------------------------------------------------

分片上传技术全解析：原理、优势与应用（含简单实现源码）

一、什么是分片上传

分片上传（Chunked Upload）是将大文件分成多个较小的部分（分片）来逐个上传到服务器。上传完成后，服务器将这些分片重新组装成原始文件。这个过程通常包括以下几个步骤：

分片：文件被切割成多个小的片段，每个片段的大小通常是预定义的。
上传：每个分片被单独上传到服务器。上传过程中，通常会附带分片的索引和其他元数据。
组装：服务器接收到所有分片后，将它们按正确的顺序重新组装成完整的文件。
确认：完成组装后，服务器可以返回一个确认响应，表示文件上传成功。

二、分片上传解决了什么问题

分片上传是一个有效的处理大文件上传问题的方案，它通过将文件分割为小片段来提高上传的可靠性和效率，并确保数据的完整性。在网络环境环境不好，存在需要重传风险的场景，分片上传能有效提升上传的体验。

其具体优势在于：

大文件上传的稳定性：对于大文件，直接上传可能会因为网络问题、超时等导致上传失败。分片上传可以在单个分片上传失败时仅重新上传失败的分片，而不是整个文件，提高了上传的成功率。
减少内存使用：分片上传可以将大文件拆分为较小的片段，这样可以减少内存消耗并优化上传性能。
断点续传：分片上传支持断点续传。即使上传过程中发生了中断，用户可以从中断的位置继续上传，不必从头开始。
负载均衡：可以在多个服务器之间分配分片上传任务，提高系统的负载均衡能力。

三、分片上传的本质

3.1、分片上传的本质意义

分片上传的本质就是将大文件分割成多个较小的部分，逐个上传到服务器，然后在服务器端将这些部分重新组合成完整的文件。这种方法不仅解决了大文件上传的问题，还能优化网络带宽和提高上传效率。

大多数情况下，服务器会负责将接收到的分片重新组装成完整的文件。服务器通常会根据分片的索引顺序将它们拼接起来。在某些情况下，客户端可能会将所有分片上传到服务器后，由客户端自行处理合并操作（通常较少见）。

3.2、分片上传的风险与规避方式

①网络问题

网络中断可能导致某些分片上传失败。为了应对这种情况，可以实现重试机制和断点续传功能。

②服务器端错误

服务器在接收和组装分片时可能会发生错误。应确保服务器有适当的错误处理和日志记录机制。

③文件完整性校验

为了确保文件在上传和组装过程中没有发生损坏，通常会计算文件的哈希值，并在上传完成后进行校验。在第四部分案例代码中使用了SparkMD5来计算文件的MD5哈希值，以确保文件的一致性和完整性。

3.3、分片上传中的重试机制与断点续传

这些技术可以结合使用，以提高上传的鲁棒性。重试机制确保分片上传的稳定性，断点续传支持上传中断后的恢复。

①重试机制

重试机制是在上传过程中，如果遇到网络问题、服务器错误或其他上传失败的情况，自动重新尝试上传失败的部分（通常是分片上传中会使用重试机制）。适用于网络不稳定或服务器偶尔出现故障的情况。可以做到：

提高成功率：自动处理上传失败的情况，提高上传成功率。
错误恢复：在上传过程中遇到错误时，可以自动恢复，无需用户干预。
可配置性：重试次数和时间间隔可以进行配置，以适应不同的需求和网络环境。

②断点续传

断点续传断点续传是允许在上传过程中中断后，能够从中断的位置继续上传，而不是从头开始。这通常涉及记录已上传的部分，并在恢复时跳过这些已上传部分。

一般来说，断点续传是从断开的分片起，重新上传该分片及之后的分片。但也有更精细的实现方式，从精确的分片的断点位置起，这样在中断频繁的网络环境中表现更好，可以避免重复上传已经部分成功的内容。更加高效和灵活，但实现复杂度较高。

断点续传有助于：

中断恢复：在上传过程中，如果发生中断，可以从中断点继续上传，而不是重新上传整个文件。
记录状态：需要在客户端或服务器端记录上传进度。
用户体验：提升用户体验，避免长时间上传过程中的中断带来的困扰。

四、基于js的简单实现案例

前端代码：

 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="1">

class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="1"> class="hljs-ln-code"> class="hljs-ln-line">const express = require('express') class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="2"> class="hljs-ln-code"> class="hljs-ln-line">const cors = require('cors') class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="3"> class="hljs-ln-code"> class="hljs-ln-line">const app = express() class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="4"> class="hljs-ln-code"> class="hljs-ln-line"> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="5"> class="hljs-ln-code"> class="hljs-ln-line">app.use(cors()) class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="6"> class="hljs-ln-code"> class="hljs-ln-line"> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="7"> class="hljs-ln-code"> class="hljs-ln-line">const hostname = '127.0.0.1' class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="8"> class="hljs-ln-code"> class="hljs-ln-line">const port = 3000 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="9"> class="hljs-ln-code"> class="hljs-ln-line"> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="10"> class="hljs-ln-code"> class="hljs-ln-line">app.use(express.json()) class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="11"> class="hljs-ln-code"> class="hljs-ln-line"> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="12"> class="hljs-ln-code"> class="hljs-ln-line">// 模拟支付 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="13"> class="hljs-ln-code"> class="hljs-ln-line">app.post('/upload', (req, res) => { class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="14"> class="hljs-ln-code"> class="hljs-ln-line"> res.status(200).json({}) class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="15"> class="hljs-ln-code"> class="hljs-ln-line">}) class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="16"> class="hljs-ln-code"> class="hljs-ln-line"> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="17"> class="hljs-ln-code"> class="hljs-ln-line">app.listen(port, hostname, () => { class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="18"> class="hljs-ln-code"> class="hljs-ln-line"> console.log(`Server is running at http://${hostname}:${port}/`) class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="19"> class="hljs-ln-code"> class="hljs-ln-line">}) class="hide-preCode-box">

class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)">