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 相关文章推荐
jQuery ajax BUG:object doesn't support this property or method
Jul 06 Javascript
html中使用javascript调用本地程序(exe、doc等)实现代码
Apr 26 Javascript
js键盘事件的keyCode
Jul 29 Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
Aug 10 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
Aug 24 Javascript
jquery实现的动态回到顶部特效代码
Oct 28 Javascript
一道常被人轻视的web前端常见面试题(JS)
Feb 15 Javascript
jQuery实现一个简单的轮播图
Feb 19 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
Jul 15 Javascript
详细教你微信公众号正文页SVG交互开发技巧
Jul 25 Javascript
Vue Router的手写实现方法实现
Mar 02 Javascript
js实现鼠标拖曳效果
Dec 30 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
php生成txt文件实例代码介绍
2016/04/28 PHP
Thinkphp框架开发移动端接口(1)
2016/08/18 PHP
在 PHP 和 Laravel 中使用 Traits的方法
2019/11/13 PHP
Array.prototype.slice 使用扩展
2010/06/09 Javascript
js中eval()函数和trim()去掉字符串左右空格应用
2013/02/02 Javascript
angularjs实现搜索的关键字在正文中高亮出来
2017/06/13 Javascript
微信小程序用户信息encryptedData详解
2018/08/24 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
2019/04/01 Javascript
[06:33]3.19 DOTA2发布会 海涛、冷冷、2009见证希望
2014/03/21 DOTA
[01:43]深扒TI7聊天轮盘语音出处4
2017/05/11 DOTA
[02:12]打造更好的电竞完美世界:完美盛典回顾篇
2018/12/19 DOTA
[01:10:24]DOTA2-DPC中国联赛 正赛 VG vs Aster BO3 第一场 2月28日
2021/03/11 DOTA
python调用shell的方法
2013/11/20 Python
深入解析Python中的集合类型操作符
2015/08/19 Python
Python脚本暴力破解栅栏密码
2015/10/19 Python
编写Python小程序来统计测试脚本的关键字
2016/03/12 Python
python字符串中的单双引
2017/02/16 Python
python实现redis三种cas事务操作
2017/12/19 Python
基于Django OneToOneField和ForeignKey的区别详解
2020/03/30 Python
cookies应对python反爬虫知识点详解
2020/11/25 Python
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
2017/10/26 HTML / CSS
有原因的手表:Flex Watches
2019/03/23 全球购物
SQL Server面试题
2016/10/17 面试题
如何撰写岗位职责
2014/02/01 职场文书
大学生个人求职口试自我评价
2014/02/16 职场文书
元旦促销方案
2014/03/15 职场文书
好习惯伴我成长演讲稿
2014/05/21 职场文书
局火灾防控工作方案
2014/05/25 职场文书
机关作风建设剖析材料
2014/10/11 职场文书
法定代表人证明书
2014/11/28 职场文书
2015年乡镇工作总结范文
2015/04/22 职场文书
六五普法先进个人主要事迹材料
2015/11/03 职场文书
MySQL索引篇之千万级数据实战测试
2021/04/05 MySQL
python 实现德洛内三角剖分的操作
2021/04/22 Python
使用pandas或numpy处理数据中的空值(np.isnan()/pd.isnull())
2021/05/14 Python
python中的class_static的@classmethod的巧妙用法
2021/06/22 Python