此系列皆为实践系列,看到一些demo主动去实现它并与之分享。

今天刚好看到了一片文章分块上传的文章,自己并没有实现过。思来想去实践一下并且前后双端进行实现。文笔不好请多担待,不明白评论看到即回。俗话事吃水不忘挖井人,附上文章链接

整体思路

文件分块上传:

BlobSlice

断点续传

该功能也是在文件分块上传的基础上进行实现的。我们把一个文件分成了几个区块,重新上传的时候进行匹配,选择没有上传的区块进行上传。

文件秒传

其实这是一个假功能。。。可能是我这么理解的吧。用户进行上传的进行HASH匹配,如果存在文件HASH值,就不需要上传了直接从服务器复制给他。

功能分析

大致如此,好滴我们来实现一下吧。 借用一下凹凸实验室提供的这张图(哈哈哈懒得自己做图)

根据这张图我们大概分析出会存在三个接口
  • 文件是否完整上传完毕
  • 上传文件区块
  • 合并已经上传的区块

Golang 实现

创建路由

本教程采用Gin进行实现路由,当然纯原生也实现的。等同嘛,大伙尽量进行举一反三。

还有一个检查路径的函数

文件检查

实现第一个接口用于取文件状态和以及上传的文件区块

上传区块

进行区块合并

前端实现

既然上传文件,当然我们需要一个上传框框啦。

    <input type="file">
复制代码

前期准备

准备一下接口 咱们先准备一下三个请求的接口,这三个接口分别对应上面的三个接口

接口准备完了,我们当然是文件发生变化之后才开始请求嘛

文件分块

当用户选择完文件之后我们对他进行分块处理

计算文件HASH

这里用到了一个库进行MD5,下面提供一个地址。当然你也可以自己选择其他地方下载或者npm

<script src="https://cdn.bootcdn.net/ajax/libs/spark-md5/3.0.0/spark-md5.min.js"></script>
复制代码

接口调用上传文件