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右下角旋转环状菜单特效代码
Aug 10 Javascript
JavaScript下的时间格式处理函数Date.prototype.format
Jan 27 Javascript
AngularJS Bootstrap详细介绍及实例代码
Jul 28 Javascript
js select实现省市区联动选择
Apr 17 Javascript
vue2.0+webpack环境的构造过程
Nov 08 Javascript
js事件源window.event.srcElement兼容性写法(详解)
Nov 25 Javascript
JavaScript实现获取远程的html到当前页面中
Mar 26 Javascript
vue双花括号的使用方法 附练习题
Nov 07 Javascript
使用Vue开发动态刷新Echarts组件的教程详解
Mar 22 Javascript
小白教程|一小时上手最流行的前端框架vue(推荐)
Apr 10 Javascript
微信小程序实现锚点功能
Nov 20 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
Jul 28 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
全国FM电台频率大全 - 4 山西省
2020/03/11 无线电
PHP 危险函数全解析
2009/09/09 PHP
用PHP代替JS玩转DOM的思路及示例代码
2014/06/15 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
Avengerls vs Newbee BO3 第二场2.18
2021/03/10 DOTA
js 字符串操作函数
2009/07/25 Javascript
js 覆盖和重载 函数
2009/09/25 Javascript
date.parse在IE和FF中的区别
2010/07/29 Javascript
多个js与css文件的合并方法详细说明
2012/12/26 Javascript
jQuery获取Select选择的Text和Value(详细汇总)
2013/01/25 Javascript
javascript实现的HashMap类代码
2014/06/27 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
2015/01/13 Javascript
javascript模拟C#格式化字符串
2015/08/26 Javascript
如何检测JavaScript的各种类型
2016/07/30 Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
2016/10/15 Javascript
Bootstrap 3多级下拉菜单实例
2017/11/23 Javascript
微信小程序图片选择区域裁剪实现方法
2017/12/02 Javascript
使用Angular CLI生成路由的方法
2018/03/24 Javascript
js如何获取图片url的Blob值并预览示例代码
2019/03/07 Javascript
Python实现计算圆周率π的值到任意位的方法示例
2018/05/08 Python
python实现FTP循环上传文件
2020/03/20 Python
Python GUI编程学习笔记之tkinter界面布局显示详解
2020/03/30 Python
Python实现一个优先级队列的方法
2020/07/31 Python
美国顶尖折扣时尚购物网:Bluefly
2016/08/28 全球购物
亚洲航空公司官方网站:AirAsia
2019/11/25 全球购物
俄罗斯儿童和青少年服装、鞋子及配件的在线商店:Orby
2020/02/20 全球购物
学生自我评语大全
2014/04/18 职场文书
企业文化标语口号
2014/06/09 职场文书
超市客服工作职责
2014/06/11 职场文书
汽车检测与维修专业求职信
2014/07/04 职场文书
运动会铅球比赛加油稿
2014/09/26 职场文书
SqlServer: 如何更改表的文件组?(进而改变存储位置)
2021/04/05 SQL Server
Python基础之进程详解
2021/05/21 Python
MySQL图形化管理工具Navicat安装步骤
2021/12/04 MySQL
漫画「古见同学有交流障碍症」第25卷封面公开
2022/03/21 日漫