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

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

大规格文件的上传优化—凹凸实验室

整体思路

文件分块上传:

主要利用前端Blob进行Slice切块。然后后端这边把这几个分块合并成一个完整的文件（File是继承Blob对象）

Blob MDN参考链接

断点续传

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

文件秒传

其实这是一个假功能。。。可能是我这么理解的吧。用户进行上传的进行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>复制代码

接口调用上传文件

源码地址~

---