大文件断点续传以及进度条的实现方案

大家好,我是小趴菜,文件上传在我们工作中算是一个经常会遇到的一个需求。最常见的做法是直接将整个文件上传,然后由后端进行保存。最后返回一个响应状态码给前端。

问题就是如果用户上传一个很大的文件,这时候上传到一半失败了,那么用户就只能重新上传,这时候用户估计都要开始骂人了。

最好是上传失败了,下次上传就从上次失败的开始,这样就不用重新上传了,所以整体流程如下

断点续传

这时候我们数据库存储的就是如下格式

  • 文件地址:每一个被拆分的小文件的存储地址
  • 文件序列号:这是第几个文件
  • 总文件数量:这个文件被拆分成几个小文件
  • 文件唯一标识:就是给整个大文件生成的唯一标识
js 复制代码
 id        文件唯一标识      文件序列号      文件地址       总文件数量
 1             xpc              1          www.xxx           5
 2             xpc              2          www.xxx           5
 3             xpc              3          www.xxx           5
 4             xpc              4          www.xxx           5
 5             xpc              5          www.xxx           5

那么我们就可以通过这张表得知我们的文件是否都上传了完成了,上传完成以后,我们要做的就是对文件的合并,在对文件进行合并的时候,合并的顺序要与上传的顺序一致,否则合并后的文件就会与原文件不符,这也是为什么要在表里设置一个文件序列号的原因

假设说我们上传第三个小文件失败了,这时候重新上传,重新上传的时候我们让前端传一个文件的唯一标识过来,我们到表里查看一下之前是否上传过,比如说这里上传第三个文件失败了,但是前面二个小文件是上传成功了的。这时候我们可以查到前面二个小文件已经上传成功了,这时候就可以告诉前端,直接从第三个小文件开始上传即可,前面二个小文件就不用上传了

断点续传是完成了,但是用户想知道我此时上传的进度如何,这时候又改怎么做呢?

进度条展示

其实实现起来很简单,我们是可以拿到总的小文件数量以及此时上传的小文件的序号的对吧,比如你一个100MB的文件我分成5个小文件。这时候上传到第三个,上传成功之后,这时候我们用这个小文件的序列号跟小文件总数量相除不就可以得到一个上传百分比的数了嘛

这时候上传的百分比数据是可以得到了,但是前端又该怎么拿到呢?

实现一

我们拿到这个百分比数据之后,以文件唯一标识为key,百分比数据为value,存到redis中,让前端轮询去查

实现二

我们每次上传一个小文件成功以后,都会返回响应给前端的,这时候可以把这个百分比数据携带在响应体中,一起传给前端。

相关推荐
Themberfue1 小时前
RabbitMQ ⑥-集群 || Raft || 仲裁队列
linux·运维·分布式·后端·rabbitmq·ruby
不争先.4 小时前
Pycharm和Flask的学习心得(4和5)
后端·python·flask
编程乐学(Arfan开发工程师)6 小时前
16、最佳实践-SpringBoot应用如何编写
java·spring boot·后端
2401_876907526 小时前
IEC 61156-5:2020 标准技术解析与应用综述
经验分享·面试·职场和发展·跳槽·iec
MARS_AI_7 小时前
云蝠语音智能体——电话面试中的智能助手
人工智能·自然语言处理·面试·职场和发展·交互·信息与通信
fashia7 小时前
Java转Go日记(五十六):gin 渲染
开发语言·后端·golang·go·gin
养-乐多7 小时前
梳理Spring Boot中三种异常处理
java·spring boot·后端
Code哈哈笑7 小时前
【基于SpringBoot的图书购买系统】深度讲解 分页查询用户信息,分析前后端交互的原理
java·数据库·spring boot·后端·spring·交互
.生产的驴7 小时前
Vue3 数据可视化屏幕大屏适配 页面自适应 响应式 数据大屏 大屏适配
java·c++·vue.js·后端·信息可视化·前端框架·vue
源码云商8 小时前
基于 Spring Boot + Vue 的墙绘产品展示交易平台设计与实现【含源码+文档】
vue.js·spring boot·后端