大文件分块上传之断点续传

断点续传是一种网络的传输机制，用于在文件传输过程中出现中断或错误时，能够恢复传输而不必重新开始，它解决了网络不稳定连续中断或大文件传输时时间过长等问题。提高了文件传输时可靠和效率性。

• 例如在网络不稳定的情况下，传输文件可能会出现中断，而断点续传可以帮助恢复传输，减少传输失败的影响。
• 对于大文件的传输，从新开始传输会。浪费大量的时间和带宽资源，而断点续传可以避免重新将整个文件进行传输操作。
• 从用户体验方面来说，断点续传提供了更好的用户体验，因为用户不需要从头开始重新上传或下载文件，节省了时间和精力。

原理：基于文件的分块传输

        因为每个块都有一个唯一标识符 ，在传输的过程中，每一个块都会记录传输的状态信息，包括已经成功传输和未传输的块信息，当传输中断或失败时可以记录状态信息，确定哪一些块已经成功传输，那一些块还没有被进行传输处理。

那么我们只需要去确定在传输过程中，传输失败的块的起始位置，然后需要从失败传送的块位置进行重新上传即可。对于已成功上传的块信息则不需要再次的处理。

断点续传的实现方式需要去注意几个核心的关键技术点：

（1）文件需要进行固定大小的分块处理，通常是几KB和几MB的大小。需要对每一块进行唯一标识符的处理。目的是为了跟踪块的传输状态。还需要进行状态值的记录，记录每个块传输的状态信息，包括已传输的块和未传输的块信息内容。

（2）控制操作：及时的记录已成功传输的块，在传输中断时保存已传输块和未传输块的状态信息，以便在恢复的时候进行确认。在传输恢复的时候，还需要去明确之前的一个状态信息，确保需要后续继续上传块内容，因为我们需要去确认从上一个中断的地方进行块的传输恢复。

断点续传有很多的优势，最大的优势是节约时间和资源，因为断点续传可以避免重新传输整个文件，而且它还可以去提高可靠性，在网络不稳定的情况下，断点续传可以减少传输失败的影响，保证文件的完整和可靠性，用户体验也会提升。

不足之处：

        在传输过程中，断点续传可能无法完全正确的恢复其传输的状态，需要额外的校验机制来解决这个问题。并且文件块大小也需要去控制，去选择，选择合适的文件块大小对断点续传有一定的影响，过小的块可能导致传输控制开销增大，过大的块可能会导致传输以后需要传输较大的数据量。

如何实现断点续传？？？？

文件上传之大文件分块上传-CSDN博客

大文件分块上传进度控制处理-CSDN博客

首先查看这两个博客去实现分块以及进度处理，在这个基础上去实现断点续传。

第一步：（写在while循环外）

（1）定义名称以及当前的索引值

const resumeKey = file.name + '-currentChunk'; // 用于断点续传的本地存储键名
const resumeIndex = localStorage.getItem(resumeKey); // 当前的索引值

（2）做个判断

因为当前我们并没有执行resumekey的操作，所以要写一个条件判断

假设：resumeIndex不存在为null的情况下，也就是说之前已经进行过文件的分块上传，但是因为一些特殊的原因，并没有成功处理，所以可以从本地存储当中获取到resumeIndex下标值。并赋值给当前块currentChunk。那么下一次从本地存储当中获取的index值进行后续的上传操作。

否则会移除之前的resumekey值

if (resumeIndex != null) {
    currentChunk = parseInt(resumeIndex); // 如果存在已处理的分片索引，则更新currentChunk
} else {
    localStorage.removeItem(resumeKey); // 否则移除本地存储的键值对
}

（3）在while循环内进行本地存储的操作，因为当一个分片上传成功后，就去记录它的一个上传成功的标识符。

当整个文件上传成功后，需要将resumeKey值从本地存储中进行移除。

localStorage.setItem(resumeKey,currentChunk);
localStorage.removeItem(resumeKey);

那么以上就实现了前端的一个分片上传，续传的一个功能实现。

运行代码，可以看到当出现异常情况后，我们就可以确认起始的上传块的索引位置应该就从当前已经上传成功的索引块位置开始。 

点击上传，则会确认已经进行断点续传的操作处理，那么服务器端也会对后续的块文件进行继续的断点续传操作，直到所有的块上传成功，并且产生一个文件合并的操作。

那么以上则是利用了本地存储的标识处理去完成了大文件分块上传的断点续传操作