文件上传之断点续传和跨端续传

原创文章 作者:月光光 2020年04月27日 19:02helloweba.net 标签:文件上传  Vue.js 

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

为了阅读和开发方便,我将文件上传系列相关文章章节列出来,建议从01节开始看起,文章内容按顺序紧紧相连:

本系列文章相关源码已经上传到github上,请参照下载:https://github.com/lrfbeyond/fast-uploader

断点续传原理及流程

文章讲解了《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格式数据。

试验

最后我们来测试断点续传。

首先打开你的Chrome浏览器利器,运行上传页面,选择一个大点的文件,这里我选择了一个1.9GB的系统镜像文件,开始上传。

现在,我们关闭这个浏览器,断开网络。你可以断电,重启电脑等方式模拟上传中断,然后把文件带回家。

然后使用另外一个浏览器,我临时用以下360浏览器,模拟跨浏览器场景。

注意重新选择同一个文件上传。在上传前检测md5值是必不可少的,大文件的md5计算速度也会相对较长一点。

计算完md5后,前端先是向后端发送一个get请求,看看是否是秒传,应急看看是否已经传过一部分了,应该断点续传。

很显然,后端返回了已经上传的分片,那么就该从断点处续传。

我们到服务端打开分片临时目录可以看到:

注意图中红框部分,第一次上传后,分片id编号是135,时间是17:02,下一个分片id是136,时间是17:05。也就是说第二次上传的时候是从136开始的,之前的分片并没有被删除也没有被覆盖,最后等所有分片上传完毕就合并成一个完整的文件。

于是就实现了跨浏览器跨终端续传文件。

关于文件上传的总结

文件上传的关键是分片和计算md5,根据文件分片信息和md5值,可以实现分片上传、秒传文件、断点续传等功能。

不管是秒传文件还是续传文件,第一步计算md5是不能跨越的。

服务端文件的保存方式,一般设置一个临时目录保存分片信息,合并后移除分片,并将最终文件保存在另一个目录下。根据项目需求,文件保存的目录可以是在web目录下,也可以是在web访问不到的目录。

关于文件上传的系列文章就写到这里,接下来我准备给大家分享文件下载的事,您将了解到如何下载大文件、如何实现断点下载,如何异步下载文件,敬请关注。

声明:本文为原创文章,helloweba.net和作者拥有版权,如需转载,请注明来源于helloweba.net并保留原文链接:https://www.helloweba.net/javascript/637.html

1条评论

  • 小靓孩

    大神,后端这个错误是什么意思。。怎么办,权限也给了 code: 1002, message: "打开临时文件失败"

    月光光 回复: 是不是php限制了最大上传大小了