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 相关文章推荐
jQuery DIV弹出效果实现代码
Jul 03 Javascript
JS this作用域以及GET传输值过长的问题解决方法
Aug 06 Javascript
原生js实现日期联动
Jan 12 Javascript
微信小程序 ecshop地址三级联动实现实例代码
Feb 28 Javascript
彻底学会Angular.js中的transclusion
Mar 12 Javascript
JS实现的点击表头排序功能示例
Mar 27 Javascript
微信小程序用户位置权限的获取方法(拒绝后提醒)
Nov 15 Javascript
nuxt框架中对vuex进行模块化设置的实现方法
Sep 06 Javascript
JS内置对象和Math对象知识点详解
Apr 03 Javascript
Jquery高级应用Deferred对象原理及使用实例
May 28 jQuery
Vue使用轮询定时发送请求代码
Aug 10 Javascript
浏览器JavaScript调试功能无法使用解决方案
Sep 18 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
php巧获服务器端信息
2006/12/06 PHP
php判断输入不超过mysql的varchar字段的长度范围
2011/06/24 PHP
php弹出对话框实现重定向代码
2014/01/23 PHP
ThinkPHP采用原生query实现关联查询left join实例
2014/12/02 PHP
php通过获取头信息判断图片类型的方法
2015/06/26 PHP
PHP耦合设计模式实例分析
2018/08/08 PHP
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
2010/12/28 Javascript
减少访问DOM的次数提升javascript性能
2014/02/24 Javascript
js采用concat和sort将N个数组拼接起来的方法
2016/01/21 Javascript
JavaScript面向对象程序设计教程
2016/03/29 Javascript
jQuery的promise与deferred对象在异步回调中的作用
2016/05/03 Javascript
Angular页面间切换及传值的4种方法
2016/11/04 Javascript
简单实现IONIC购物车功能
2017/01/10 Javascript
vue实现百度搜索下拉提示功能实例
2017/06/14 Javascript
详解JS数组Reduce()方法详解及高级技巧
2017/08/18 Javascript
微信小程序支付及退款流程详解
2017/11/30 Javascript
js拖动滑块和点击水波纹效果实例代码
2018/10/16 Javascript
Django objects的查询结果转化为json的三种方式的方法
2018/11/07 Python
pycharm配置pyqt5-tools开发环境的方法步骤
2019/02/11 Python
详解Numpy中的数组拼接、合并操作(concatenate, append, stack, hstack, vstack, r_, c_等)
2019/05/27 Python
Django框架自定义session处理操作示例
2019/05/27 Python
使用python serial 获取所有的串口名称的实例
2019/07/02 Python
python3.8下载及安装步骤详解
2020/01/15 Python
HTML5 WebGL 实现民航客机飞行监控系统
2019/07/25 HTML / CSS
html5 http的轮询和Websocket原理
2018/10/19 HTML / CSS
西班牙拥有最佳品牌的动物商店:Animalear.com
2018/01/05 全球购物
Theo + George官方网站:都柏林时尚品牌
2019/04/08 全球购物
八年级美术教学反思
2014/02/02 职场文书
小学生检讨书大全
2014/02/06 职场文书
承诺书格式范文
2014/06/03 职场文书
2014年班干部工作总结
2014/11/25 职场文书
2014幼儿园卫生保健工作总结
2014/12/05 职场文书
一年级数学上册复习计划
2015/01/17 职场文书
致运动员赞词
2015/07/22 职场文书
关于艺术节的开幕致辞
2016/03/04 职场文书
浅谈Nginx 中的两种限流方式
2021/03/31 Servers