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 性能优化指南(3)
May 21 Javascript
jQuery AJAX 调用WebService实现代码
Mar 24 Javascript
jquery触发a标签跳转事件示例代码
Jul 21 Javascript
JS实现很酷的EMAIL地址添加功能实例
Feb 28 Javascript
简单理解vue中Props属性
Oct 27 Javascript
深入理解Javascript中的观察者模式
Feb 20 Javascript
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
vue.js与element-ui实现菜单树形结构的解决方法
Apr 21 Javascript
操作按钮悬浮固定在微信小程序底部的实现代码
Aug 02 Javascript
vue实现员工信息录入功能
Jun 11 Javascript
jQuery+ajax实现文件上传功能
Dec 22 jQuery
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 Vue.js
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数组使用规则分析
2015/02/27 PHP
Zend Framework入门教程之Zend_Session会话操作详解
2016/12/08 PHP
Laravel给生产环境添加监听事件(SQL日志监听)
2017/06/19 PHP
PHP递归实现快速排序的方法示例
2017/12/18 PHP
小型js框架veryide.librar源代码
2009/03/05 Javascript
JS遮罩层效果 兼容ie firefox jQuery遮罩层
2010/07/26 Javascript
jQuery源码分析-05异步队列 Deferred 使用介绍
2011/11/14 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
2012/01/03 Javascript
IE与FF下javascript获取网页及窗口大小的区别详解
2014/01/14 Javascript
网页广告中JS代码的信息监听示例
2014/04/02 Javascript
使用Chrome调试JavaScript的断点设置和调试技巧
2014/12/16 Javascript
JavaScript设计模式之原型模式(Object.create与prototype)介绍
2014/12/28 Javascript
Node.js读写文件之批量替换图片的实现方法
2016/09/07 Javascript
浅析BootStrap Treeview的简单使用
2016/10/12 Javascript
webpack+vue.js快速入门教程
2016/10/12 Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
2016/11/17 Javascript
jQuery与JavaScript节点创建方法的对比
2016/11/18 Javascript
BootStrap 模态框实现刷新网页并关闭功能
2017/01/04 Javascript
jQuery自定义图片上传插件实例代码
2017/04/04 jQuery
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
2017/04/19 Javascript
浅谈jQuery框架Ajax常用选项
2017/07/08 jQuery
使用JavaScript实现表格编辑器(实例讲解)
2017/08/02 Javascript
three.js实现3D影院的原理的代码分析
2017/12/18 Javascript
详解react-native WebView 返回处理(非回调方法可解决)
2018/02/27 Javascript
详解Vue template 如何支持多个根结点
2020/02/10 Javascript
Node.js 深度调试方法解析
2020/07/28 Javascript
python每隔N秒运行指定函数的方法
2015/03/16 Python
关于Python中异常(Exception)的汇总
2017/01/18 Python
基于Python中Remove函数的用法讨论
2020/12/11 Python
美国内衣第一品牌:Hanes(恒适)
2016/07/29 全球购物
英国第一蛋白粉品牌:Myprotein
2016/09/14 全球购物
英国办公用品商店:Office Outlet
2018/04/04 全球购物
美国购买肉、鸭、家禽、鹅肝和熟食网站:D’Artagnan
2018/11/13 全球购物
好的自荐信包括什么内容
2013/11/07 职场文书
料理师求职信
2014/01/30 职场文书
学校对教师的评语
2014/04/28 职场文书