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 相关文章推荐
js获取单选按钮的数据
Nov 27 Javascript
jQuery找出网页上最高元素的方法
Mar 20 Javascript
javascript实现简单的鼠标拖动效果实例
Apr 10 Javascript
JavaScript中的getDay()方法使用详解
Jun 09 Javascript
jQuery插件imgPreviewQs实现上传图片预览
Jan 15 Javascript
js 获取本地文件及目录的方法(推荐)
Nov 10 Javascript
JavaScript 控制字体大小设置的方法
Nov 23 Javascript
详解Angular4中路由Router类的跳转navigate
Jun 09 Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
Jul 26 Javascript
webpack external模块的具体使用
Mar 10 Javascript
JavaScript实现多态和继承的封装操作示例
Aug 20 Javascript
JSON生成Form表单的方法示例
Nov 21 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获取服务器信息的实现代码
2013/02/04 PHP
hadoop常见错误以及处理方法详解
2013/06/19 PHP
php判断用户是否关注微信公众号
2016/07/22 PHP
Yii2语言国际化的配置教程
2018/08/19 PHP
firefox插件Firebug的使用教程
2010/01/02 Javascript
一个简单的js动画效果代码
2010/07/20 Javascript
枚举的实现求得1-1000所有出现1的数字并计算出现1的个数
2013/09/10 Javascript
JS删除字符串中重复字符方法
2014/03/09 Javascript
jQuery动态效果显示人物结构关系图的方法
2015/05/07 Javascript
基于jquery实现在线选座订座之影院篇
2015/08/24 Javascript
用JS动态改变表单form里的action值属性的两种方法
2016/05/25 Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
2016/08/15 Javascript
Vue.js中数组变动的检测详解
2016/10/12 Javascript
JS实现批量上传文件并显示进度功能
2017/06/27 Javascript
今天,小程序正式支持 SVG
2019/04/20 Javascript
vue视频播放暂停代码
2019/11/08 Javascript
javascript+Canvas实现画板功能
2020/06/23 Javascript
Python类的用法实例浅析
2015/05/27 Python
Python多进程multiprocessing用法实例分析
2017/08/18 Python
python在ubuntu中的几种安装方法(小结)
2017/12/08 Python
详解Python中的type和object
2018/08/15 Python
Python-while 计算100以内奇数和的方法
2019/06/11 Python
用python中的matplotlib绘制方程图像代码
2019/11/21 Python
python palywright库基本使用
2021/01/21 Python
CSS3+JavaScript实现炫酷呼吸效果的示例代码
2020/06/15 HTML / CSS
澳大利亚著名的纺织品品牌:Canningvale
2020/05/05 全球购物
若干个Java基础面试题
2015/05/19 面试题
销售高级职员求职信
2013/10/29 职场文书
法律进企业活动方案
2014/03/04 职场文书
2014年优秀班主任工作总结
2014/12/16 职场文书
2015政治思想表现评语
2015/03/25 职场文书
2015年大学宣传部工作总结
2015/05/26 职场文书
毕业证明模板
2015/06/19 职场文书
如何理解PHP核心特性命名空间
2021/05/28 PHP
用 Python 定义 Schema 并生成 Parquet 文件详情
2021/09/25 Python
css样式important规则的正确使用方式
2022/06/10 HTML / CSS