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 获取json数据实现代码
Apr 27 Javascript
检测jQuery.js是否已加载的判断代码
May 20 Javascript
jquery中.add()的使用分析
Apr 26 Javascript
js实现可键盘控制的简单抽奖程序
Jul 13 Javascript
使用jQuery实现页面定时弹出广告效果
Aug 24 jQuery
JavaScript数组的5种迭代方法
Sep 29 Javascript
angularJs-$http实现百度搜索时的动态下拉框示例
Feb 27 Javascript
vue router 源码概览案例分析
Oct 09 Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
May 22 Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
Sep 28 Javascript
深入了解Vue.js 混入(mixins)
Jul 23 Javascript
JavaScript实现筛选数组
Mar 02 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
html静态页面调用php文件的方法
2014/11/13 PHP
PHP ajax 异步执行不等待执行结果的处理方法
2015/05/27 PHP
Zend Framework教程之动作的基类Zend_Controller_Action详解
2016/03/07 PHP
详解配置 Apache 服务器支持 PHP 文件的解析
2017/02/15 PHP
PHP+Ajax实现的检测用户名功能简单示例
2019/02/12 PHP
PHP实现获取url地址中顶级域名的方法示例
2019/06/05 PHP
JavaScript中的对象化编程
2008/01/16 Javascript
地址栏上的一段语句,改变页面的风格。(教程)
2008/04/02 Javascript
Extjs学习笔记之六 面版
2010/01/08 Javascript
jQuery.query.js 取参数的两点问题分析
2012/08/06 Javascript
javascript小数四舍五入多种方法实现
2012/12/23 Javascript
JavaScript基础语法、dom操作树及document对象
2014/12/02 Javascript
Jquery实现图片预加载与延时加载的方法
2014/12/22 Javascript
jquery mobile开发常见问题分析
2016/01/21 Javascript
jquery 点击元素后,滚动条滚动至该元素位置的方法
2016/08/05 Javascript
JS简单实现禁止访问某个页面的方法
2016/09/13 Javascript
Axios学习笔记之使用方法教程
2017/07/21 Javascript
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
2018/07/26 Javascript
Angular angular-file-upload文件上传的示例代码
2018/08/23 Javascript
JavaScript中的函数式编程详解
2020/08/22 Javascript
Python实现按中文排序的方法示例
2018/04/25 Python
解决pycharm运行程序出现卡住scanning files to index索引的问题
2019/06/27 Python
Python利用多线程同步锁实现多窗口订票系统(推荐)
2019/12/22 Python
日本一家专门经营各种箱包的大型网站:Traveler Store
2016/08/03 全球购物
澳大利亚药房在线:ThePharmacy
2017/10/04 全球购物
顶丰TOPPIK台湾官网:增发纤维假发,告别秃发困扰
2018/06/13 全球购物
英国最大的运动营养公司之一:LA Muscle
2018/07/02 全球购物
创业计划书中要认真思考的问题
2013/12/28 职场文书
上课迟到检讨书
2014/02/19 职场文书
品牌转让协议书
2014/08/20 职场文书
2015年银行个人工作总结
2015/05/14 职场文书
2015年小学语文教师工作总结
2015/10/23 职场文书
读《教育心理学》心得体会
2016/01/22 职场文书
《日月潭》教学反思
2016/02/20 职场文书
导游词之山海关
2019/12/10 职场文书
win10滚动条自动往上跑怎么办?win10滚动条自动往上跑的解决方法
2022/08/05 数码科技