Electron中实现大文件上传和断点续传功能


Posted in Javascript onOctober 28, 2018

Electron官网的描述:Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将Chromium和Node.js合并到同一个运行时环境中,并将其打包为Mac,Windows和Linux系统下的应用来实现这一目的。

从官网的描述我们可以简单的概括,Electron是开源的框架,可以使用h5来开发跨平台pc桌面应用,这样前端开发这可以开发桌面应用了。由于它是基于Chromium和Node.js开发的,所以在Electron中既可以使用浏览器中的api也可以使用node的api。

下面我们在Electron中实现文件的上传以及断点续传。网上关于h5的上传下载的案例已经非常多,但是关于大文件的上传和续传的很少。

首先上传方案,我们通过将大文件进行分片处理,将大文件切割成固定大小的分片。通过node的fs.createReadStream方法实现:

singleUpload function(file){
  let path = file.path; //文件本地路径 
  let stats = fs.statSync(path);//读取文件信息
  let chunkSize = 3*1024*1024;//每片分块的大小3M
  let size = stats.size;//文件大小
  let pieces = Math.ceil(size / chunkSize);//总共的分片数 
  function uploadPiece (i){ 
    //计算每块的结束位置
    let enddata = Math.min(size, (i + 1) * chunkSize);
    let arr = [];
    //创建一个readStream对象,根据文件起始位置和结束位置读取固定的分片
    let readStream = fs.createReadStream(path, { start: i * chunkSize, end: enddata-1 });
      //on data读取数据
      readStream.on(‘data‘, (data)=>{
        arr.push(data)
      }) 
      //on end在该分片读取完成时触发
      readStream.on(‘end‘, ()=>{
        //这里服务端只接受blob对象,需要把原始的数据流转成blob对象,这块为了配合后端才转
        let blob = new Blob(arr)
        //新建formdata数据对象
        var formdata = new FormData();
        let md5Val = md5(Buffer.concat(arr));
        formdata.append("file", blob);
        console.log(‘blob.size‘,blob.size)
        formdata.append("md5", md5Val);
        formdata.append("size", size + ‘‘); // 数字30被转换成字符串"30"
        formdata.append("chunk", i + ‘‘);//第几个分片,从0开始
        formdata.append("chunks", pieces + ‘‘);//分片数
        formdata.append("name", name);//文件名
        post(formdata)//这里是伪代码,实现上传,开发者自己实现
  }
}

以上代码就是上传的核心部分,我们首先读取文件的基本信息,如路径,大小进行分块,然后将每块上传,我们上传循环上传整个文件的分片,就循环调用uploadpiece方法。那么我们怎么实现断点续传呢?上面的代码中我们计算每块的md5值,这里计算每个md5值就是为了断点续传使用。我们每次上传文件前,我们会先调用预上传接口,预上传接口中,前端传入fileId,后端会将改文件已经上传的分块的md5数组传给前端,前端将该文件的分块的md5值和后端返回的md5值进行逐个对比,跳过已经上传的分块。这样就实现了大文件的上传和断点续传的问题。

方案流程图:

Electron中实现大文件上传和断点续传功能

总结

以上所述是小编给大家介绍的Electron中实现大文件上传和断点续传功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼
Dec 06 Javascript
TextArea 控件的最大长度问题(js json)
Dec 16 Javascript
3款实用的在线JS代码工具(国外)
Mar 15 Javascript
seajs1.3.0源码解析之module依赖有序加载
Nov 07 Javascript
web css实现整站样式互相切换
Oct 29 Javascript
Bootstrap每天必学之下拉菜单
Nov 25 Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
Dec 17 Javascript
JS图片定时翻滚效果实现方法
Jun 21 Javascript
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
Jun 25 Javascript
微信小程序实现笑脸评分功能
Nov 03 Javascript
layui的布局和表格的渲染以及动态生成表格的方法
Sep 18 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
Aug 07 Javascript
JS 正则表达式验证密码、邮箱格式的实例代码
Oct 28 #Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
Oct 28 #Javascript
深入浅析javascript函数中with
Oct 28 #Javascript
微信小程序动画(Animation)的实现及执行步骤
Oct 28 #Javascript
又拍云 Node.js 实现文件上传、删除功能
Oct 28 #Javascript
javascript中函数的写法实例代码详解
Oct 28 #Javascript
vue项目中实现图片预览的公用组件功能
Oct 26 #Javascript
You might like
?繁体转换的class
2006/10/09 PHP
php提交表单发送邮件的方法
2015/03/20 PHP
实例讲解yii2.0在php命令行中运行的步骤
2015/12/01 PHP
thinkPHP中_initialize方法实例分析
2016/12/05 PHP
Yii Framework框架使用PHPExcel组件的方法示例
2019/07/24 PHP
Thinkphp5.0 框架使用模型Model添加、更新、删除数据操作详解
2019/10/11 PHP
Javascript实例教程(19) 使用HoTMetal(6)
2006/12/23 Javascript
一个符号插入器 中用到的js代码
2007/09/04 Javascript
js apply/call/caller/callee/bind使用方法与区别分析
2009/10/28 Javascript
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
2013/04/02 Javascript
js同比例缩放图片的小例子
2013/10/30 Javascript
用jquery中插件dialog实现弹框效果实例代码
2013/11/15 Javascript
js获取url参数代码实例分享(JS操作URL)
2013/12/13 Javascript
jQuery文字横向滚动效果的实现代码
2016/05/31 Javascript
BootStrap glyphicon图标无法显示的解决方法
2016/09/06 Javascript
JavaScript中匿名函数的递归调用
2017/01/22 Javascript
JavaScript实现的商品抢购倒计时功能示例
2017/04/17 Javascript
Three.js开发实现3D地图的实践过程总结
2017/11/20 Javascript
jquery在启动页面时,自动加载数据的实例
2018/01/22 jQuery
使用jquery Ajax实现上传附件功能
2018/10/23 jQuery
解决antd Form 表单校验方法无响应的问题
2020/10/27 Javascript
[58:57]2018DOTA2亚洲邀请赛3月29日小组赛B组 Effect VS VGJ.T
2018/03/30 DOTA
Python2.6版本中实现字典推导 PEP 274(Dict Comprehensions)
2015/04/28 Python
Python列表list内建函数用法实例分析【insert、remove、index、pop等】
2017/07/24 Python
python flask几分钟实现web服务的例子
2019/07/26 Python
pandas-resample按时间聚合实例
2019/12/27 Python
Python多线程threading创建及使用方法解析
2020/06/17 Python
如何获取某个日期是当月的最后一天
2013/12/05 面试题
Servlet面试题库
2015/07/18 面试题
毕业生应聘幼儿园的自荐信
2013/11/20 职场文书
教学评估实施方案
2014/03/16 职场文书
数学兴趣小组活动总结
2014/07/08 职场文书
大学生军训自我鉴定范文
2014/09/18 职场文书
齐云山导游词
2015/02/06 职场文书
Python基于Opencv识别两张相似图片
2021/04/25 Python
浅谈TypeScript 索引签名的理解
2021/10/16 Javascript