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 倒计时源代码.(时.分.秒) 详细注释版
May 09 Javascript
通过url查找a元素应用案例
Apr 29 Javascript
解释&&和||在javascript中的另类用法
Jul 28 Javascript
jQuery控制TR显示隐藏的三种常用方法
Aug 21 Javascript
iframe里面的元素触发父窗口元素事件的jquery代码
Oct 19 Javascript
js 递归和定时器的实例解析
Feb 03 Javascript
JS实现仿UC浏览器前进后退效果的实例代码
Jul 17 Javascript
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
Sep 10 Javascript
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
Sep 04 Javascript
在移动端使用vue-router和keep-alive的方法示例
Dec 02 Javascript
javascript自定义日期比较函数用法示例
Jul 22 Javascript
js实现蒙版效果
Jan 11 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
使用XDebug调试及单元测试覆盖率分析
2011/01/27 PHP
PHP以指定字段为索引返回数据库所取的数据数组
2013/06/30 PHP
PHP生成不重复标识符的方法
2014/11/21 PHP
浅析php创建者模式
2014/11/25 PHP
PHP之图片上传类实例代码(加了缩略图)
2016/06/30 PHP
yii2.0整合阿里云oss的示例代码
2017/09/19 PHP
Nigma vs Alliance BO5 第一场2.14
2021/03/10 DOTA
JavaScript的事件绑定(方便不支持js的时候)
2013/10/01 Javascript
jQuery简单几行代码实现tab切换
2015/03/10 Javascript
jQuery使用CSS()方法给指定元素同时设置多个样式
2015/03/26 Javascript
javascript中判断json的方法总结
2015/08/27 Javascript
分享五个有用的jquery小技巧
2015/10/08 Javascript
jQuery打字效果实现方法(附demo源码下载)
2015/12/18 Javascript
javascript制作照片墙及制作过程中出现的问题
2016/04/04 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
2016/11/25 Javascript
jQuery弹出div层过2秒自动消失
2016/11/29 Javascript
使用vue实现点击按钮滑出面板的实现代码
2017/01/10 Javascript
SVG动画vivus.js库使用小结(实例代码)
2017/09/14 Javascript
nodejs判断文件、文件夹是否存在及删除的方法
2017/11/10 NodeJs
vue中实现先请求数据再渲染dom分享
2018/03/17 Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
2018/05/16 Javascript
如何在基于vue-cli的项目自定义打包环境
2018/11/10 Javascript
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
2019/09/11 Javascript
python友情链接检查方法
2015/07/08 Python
Python 正则表达式入门(中级篇)
2016/12/07 Python
从django的中间件直接返回请求的方法
2018/05/30 Python
解决tensorflow模型参数保存和加载的问题
2018/07/26 Python
Python应用领域和就业形势分析总结
2019/05/14 Python
Django3.0 异步通信初体验(小结)
2019/12/04 Python
使用python脚本自动生成K8S-YAML的方法示例
2020/07/12 Python
CSS3 对过渡(transition)进行调速以及延时
2020/10/21 HTML / CSS
移动端html5判断是否滚动到底部并且下拉加载
2019/11/19 HTML / CSS
西班牙英格列斯百货官网:El Corte Inglés
2016/09/25 全球购物
加拿大奢华时装品牌:Mackage
2018/01/10 全球购物
连卡佛中国官网:Lane Crawford中文站
2018/01/27 全球购物
最新党员的自我评价分享
2013/11/04 职场文书