javascript之分片上传,断点续传的实际项目实现详解


Posted in Javascript onSeptember 05, 2019

总所周知,上传大文件时由于各种原因突然中断,然后整个文件需要从头开始上传,这种情况非常令人抓狂??,那么怎样才可以避免这种尴尬的情况呢?分片上传或许可以搞定这个痛点

原理:文件上传就是把文件切割成一个个小小的块,然后块逐一上传

后台约定接口:

1.getRestChunkInfo 获取当前文件的上传情况

输入:{fileName, fileSize, md5, token}

输出:{chunk_list, chunk_size, chunk_count}

chunk_list是一个数组,未上传块的编号等信息,

chunk_size:分片的大小,

chunk_count:分片的总次数,

2.uploadAPI

输入:FormData对象,块的具体信息

{file_name, file_size, file_md5, token}

输出:一个对象,包含true/false

步骤:

1.获取需要上传的文件,用md5算法做消息摘要,就是md5码作为文件的唯一标识

2.将md5码、文件名、文件大小、token值作为输入参数传给后台第一个API

3.接口返回chunk_list等参数,用chunk_list.shift取分片继续调用第二个接口,一片一片上传文件块

4.所有文件上传完成后,为了防止中间有出错的分片,在次请求第一个接口,如果chunk_list的length为0,则说明所有分片上传成功

完成上面的步骤后,后台在确认所有的分片上传完成后,就可以进行文件合并了。

图解:

javascript之分片上传,断点续传的实际项目实现详解

其中token值不是必传参数,仅仅是系统为了防止CSRF攻击,出于安全考虑的。Note:安全考虑还有加签验签功能

难点:

1.如何切片,使用Blob对象的slice方法  blob.slice(startByte,endByte);

2.当前文件已上传的片数,然后保证我从哪一片开始上传

以上就是本次介绍的关于javascript之分片上传,断点续传的实际项目实现的全部知识点内容,有需要的朋友们可以学习下。

Javascript 相关文章推荐
Javascript读取cookie函数代码
Oct 16 Javascript
JS面向对象编程浅析
Aug 28 Javascript
js的alert弹出框出现乱码解决方案
Sep 02 Javascript
仿百度的关键词匹配搜索示例
Sep 25 Javascript
js仿百度贴吧验证码特效实例代码
Jan 16 Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
Aug 20 Javascript
响应式表格之固定表头的简单实现
Aug 26 Javascript
node.js基于express使用websocket的方法
Nov 09 Javascript
js实现数组内数据的上移和下移的实例
Nov 14 Javascript
微信小程序实现流程进度的图样式功能
Jan 16 Javascript
Vue实现搜索结果高亮显示关键字
May 28 Javascript
详解vue修改elementUI的分页组件视图没更新问题
Nov 13 Javascript
layui 实现table翻页滚动条位置保持不变的例子
Sep 05 #Javascript
vue中如何实现后台管理系统的权限控制的方法步骤
Sep 05 #Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
Sep 05 #Javascript
layui 对弹窗 form表单赋值的实现方法
Sep 04 #Javascript
layui-table对返回的数据进行转变显示的实例
Sep 04 #Javascript
layui table数据修改的回显方法
Sep 04 #Javascript
Vue实现商品详情页的评价列表功能
Sep 04 #Javascript
You might like
一个简单实现多条件查询的例子
2006/10/09 PHP
openflashchart 2.0 简单案例php版
2012/05/21 PHP
简单的php文件上传(实例)
2013/10/27 PHP
php上传图片生成缩略图(GD库)
2016/01/06 PHP
PHP+JS三级菜单联动菜单实现方法
2016/02/24 PHP
ThinkPHP3.2.2实现持久登录(记住我)功能的方法
2016/05/16 PHP
ThinkPHP5+UEditor图片上传到阿里云对象存储OSS功能示例
2019/08/05 PHP
很全的显示阴历(农历)日期的js代码
2009/01/01 Javascript
input+select(multiple) 实现下拉框输入值
2009/05/21 Javascript
Javascript的构造函数和constructor属性
2010/01/09 Javascript
jquery多浏览器捕捉回车事件代码
2010/06/22 Javascript
写js时遇到的一些小问题
2010/12/06 Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
2014/07/01 Javascript
js实现跨域的方法实例详解
2015/06/24 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
2015/12/03 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
2015/12/14 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
2016/11/04 Javascript
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
2016/11/30 Javascript
基于BootStrap的前端分页带省略号和上下页效果
2017/05/18 Javascript
vue 实现 tomato timer(蕃茄钟)实例讲解
2017/07/24 Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
2017/10/17 Javascript
Vue脚手架的简单使用实例
2018/07/10 Javascript
Vue项目数据动态过滤实践及实现思路
2018/09/11 Javascript
npm scripts 使用指南详解
2018/10/08 Javascript
详解python中requirements.txt的一切
2017/03/03 Python
Python多进程库multiprocessing中进程池Pool类的使用详解
2017/11/24 Python
Python绘制正余弦函数图像的方法
2018/08/28 Python
python事件驱动event实现详解
2018/11/21 Python
Django使用中间件解决前后端同源策略问题
2019/09/02 Python
Django用数据库表反向生成models类知识点详解
2020/03/25 Python
python中count函数知识点浅析
2020/12/17 Python
路易威登和香奈儿手袋:LuxeDH
2017/01/12 全球购物
个人简历中自我评价
2014/02/11 职场文书
个人四风问题原因分析及整改措施
2014/09/28 职场文书
保密工作整改报告
2014/11/06 职场文书
简单谈谈Python面向对象的相关知识
2021/06/28 Python