此系列皆为实践系列,看到一些demo主动去实现它并与之分享。
今天刚好看到了一片文章分块上传的文章,自己并没有实现过。思来想去实践一下并且前后双端进行实现。文笔不好请多担待,不明白评论看到即回。俗话事吃水不忘挖井人,附上文章链接
整体思路
文件分块上传:
主要利用前端Blob
进行Slice
切块。然后后端这边把这几个分块合并成一个完整的文件(File是继承Blob对象)
断点续传
该功能也是在文件分块上传的基础上进行实现的。我们把一个文件分成了几个区块,重新上传的时候进行匹配,选择没有上传的区块进行上传。
文件秒传
其实这是一个假功能。。。可能是我这么理解的吧。用户进行上传的进行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>
复制代码
接口调用上传文件
有疑问加站长微信联系(非本文作者)