【实践】从零开始一个文件分块上传【后端为Golang】
Stranger · · 4515 次点击 · · 开始浏览此系列皆为实践系列,看到一些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>
复制代码接口调用上传文件
有疑问加站长微信联系(非本文作者)
入群交流(和以上内容无关):加入Go大咖交流群,或添加微信:liuxiaoyan-s 备注:入群;或加QQ群:692541889
关注微信- 请尽量让自己的回复能够对别人有帮助
- 支持 Markdown 格式, **粗体**、~~删除线~~、
`单行代码` - 支持 @ 本站用户;支持表情(输入 : 提示),见 Emoji cheat sheet
- 图片支持拖拽、截图粘贴等方式上传
收入到我管理的专栏 新建专栏
此系列皆为实践系列,看到一些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>
复制代码