六、文件上传系列-断点续传和跨端续传

我们要上传一个1G+的大文件，前端采用分片上传，但是由于某种原因比如要下班了，断电了或是网线被拔掉了，上传被迫中断。那么别急，我们有断点续传功能，你可以将大文件带回家慢慢从中断处继续上传，而不需要重新上传整个文件。

断点续传原理及流程

文章讲解了《02.文件分片上传之前端文件分片》，我们将文件分片后，一片一片依次上传给后端。后端将这些分片文件存储在一个临时目录下，等待所有分片上传完毕再合并一个完整文件。

文件上传时，会携带文件唯一标识，也就是MD5值以及分片信息。后端按照md5保存分片，即名称为同一md5的分片属于同一个文件。（理论上也有md5值冲突的，但是几率很少）。

当某种原因导致上传中断后，后端会保存已经上传好的分片。

当前端发送继续上传请求时，后端会查找该文件是否有已经上传好的分片，如果有，那么将这些分片id返回给前端，告诉前端这些分片不必再上传了，从断点处继续上传剩余的分片。

所有分片上传完毕，合并文件。

前端发送续传请求

我们在上一篇文章《05.文件上传之秒传文件》讲到，在vue-simple-uploader的options选项中添加函数checkChunkUploadedByResponse()，该函数响应后台返回message信息，同时检测分片信息是否上传完整。上传分片前，前端会携带文件md5等信息先向后端发送一个get请求，这个checkChunkUploadedByResponse()就是用来响应这个get请求的。

// 服务器分片校验函数
  checkChunkUploadedByResponse: (chunk, message) => {
      let obj = JSON.parse(message);
      if (obj.isExist) {
          this.statusTextMap.success = '秒传文件';
          return true;
      }

      return (obj.uploaded || []).indexOf(chunk.offset + 1) >= 0
  },

很显然，如果返回obj.isExist则表示文件已经存在，应该是秒传文件，该文件的所有后续上传操作就没了。

如果返回的是文件分片信息，类似：{"uploaded":[1,2,3,4,5,6,7,8,9,10,...]}，表示已经上传过了该文件的这些分片。

那么接下来就是续传，返回接下来应该从第几个分片续传，(obj.uploaded || []).indexOf(chunk.offset + 1) >= 0意思是从断点分片处继续上传下一个分片。当然了，如果没有上传过分片，那就是从第一个分片起开始上传。

后端分析断点，接受续传

后端在接收前端发来的get请求，先检测md5，确定是否应该秒传文件，然后检测已经上传了哪些分片，将这些分片id合并成数组，返回给前端。

//检测断点和md5
public function checkFile()
{
    $identifier = $this->fileInfo['identifier'];
    $filePath = self::$tmpDir. DIRECTORY_SEPARATOR . $identifier; //临时分片文件路径
    $totalChunks = $this->fileInfo['totalChunks'];

    //检测文件md5是否已经存在
    $rs = $this->checkMd5($identifier, $this->fileInfo['totalSize']);
    if ($rs['isExist'] === true) {
        return $rs;
    }

    //检查分片是否存在
    $chunkExists = [];
    for ($index = 1; $index <= $totalChunks; $index++ ) {
        if (file_exists("{$filePath}_{$index}")) {
            array_push($chunkExists, $index);
        }
    }
    if (count($chunkExists) == $totalChunks) { //全部分片存在，则直接合成
        $this->merge();
    } else {
        $res['uploaded'] = $chunkExists;
        return $res;
    }
}

在分片临时目录保存的是文件的分片，分片的命名形式：唯一标识_第几个分片。如：d816ed041157c4af2489148a1ffd60d4_29，表示md5值为d816ed041157c4af2489148a1ffd60d4第29个分片。这样大家就明白了，根据分片总数，遍历该文件的所有分片，将分片id即第几个分片追加到数组中$chunkExists，如果所有分片已经和分片总数相等时应该合并文件，否则返回字段：$res['uploaded'] = $chunkExists，最终给到前端的是json格式数据。