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 相关文章推荐
清华大学出版的事半功倍系列 javascript全部源代码
May 04 Javascript
js left,right,mid函数
Jun 10 Javascript
利用JS进行图片的切换即特效展示图片
Dec 03 Javascript
jQuery实现炫酷的鼠标轨迹特效
Feb 01 Javascript
jquery制作 随机弹跳的小球特效
Feb 01 Javascript
小议JavaScript中Generator和Iterator的使用
Jul 29 Javascript
js实现上传图片及时预览
May 07 Javascript
Highcharts入门之简介
Aug 02 Javascript
jQuery快速高效制作网页交互特效
Feb 24 Javascript
AngularJS之页面跳转Route实例代码
Mar 10 Javascript
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 jQuery
vue中使用GraphQL的实例代码
Nov 04 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
星际原理概述
2020/03/04 星际争霸
十天学会php(2)
2006/10/09 PHP
实用的PHP带公钥加密类分享(每次加密结果都不一样哦)
2014/08/20 PHP
Yii不依赖Model的表单生成器用法实例
2014/12/04 PHP
php通过记录IP来防止表单重复提交方法分析
2014/12/16 PHP
Yii2.0实现生成二维码功能实例
2017/10/24 PHP
jQuery Tools tooltip使用说明
2012/07/14 Javascript
js showModalDialog 弹出对话框的简单实例(子窗体)
2014/01/07 Javascript
JavaScript面对国际化编程时的一些建议
2015/06/24 Javascript
更靠谱的H5横竖屏检测方法(js代码)
2016/09/13 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
2018/02/02 jQuery
axios简单实现小程序延时loading指示
2018/07/30 Javascript
JS实现判断图片是否加载完成的方法分析
2018/07/31 Javascript
jQuery实现的老虎机跑动效果示例
2018/12/29 jQuery
node之本地服务器图片上传的方法示例
2019/03/26 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
2019/11/15 Javascript
[53:15]Mineski vs iG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python实现折半查找和归并排序算法
2017/04/14 Python
Python2随机数列生成器简单实例
2017/09/04 Python
python实现图片筛选程序
2018/10/24 Python
python中树与树的表示知识点总结
2019/09/14 Python
python os.path.isfile 的使用误区详解
2019/11/29 Python
Python 实现数组相减示例
2019/12/27 Python
如何基于Python实现自动扫雷
2020/01/06 Python
python GUI库图形界面开发之PyQt5布局控件QGridLayout详细使用方法与实例
2020/03/06 Python
Python 无限级分类树状结构生成算法的实现
2021/01/21 Python
购买限量版收藏品、珠宝和礼品:Bradford Exchange
2016/09/23 全球购物
青春励志演讲稿
2014/04/29 职场文书
教师专业自荐信
2014/05/31 职场文书
办公室班子四风问题对照检查材料
2014/10/04 职场文书
自我检讨书怎么写
2015/05/07 职场文书
项目验收申请报告
2015/05/15 职场文书
七年级上册生物的课件
2019/08/07 职场文书
创业计划书之校园跑腿公司
2019/09/24 职场文书
浅谈PostgreSQL表分区的三种方式
2021/06/29 PostgreSQL
SQL基础的查询语句
2021/11/11 MySQL