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 相关文章推荐
arguments对象
Nov 20 Javascript
jQuery 学习第五课 Ajax 使用说明
May 17 Javascript
javascript创建数组之联合数组的使用方法示例
Dec 26 Javascript
JS实现自定义简单网页软键盘效果代码
Nov 05 Javascript
js实现遍历含有input的table实例
Dec 07 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
Jan 06 Javascript
jQuery点击输入框显示验证码图片
May 19 Javascript
jquery操作select取值赋值与设置选中实例
Feb 28 Javascript
Javascript实现数组中的元素上下移动
Apr 28 Javascript
seajs模块压缩问题与解决方法实例分析
Oct 10 Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
Aug 08 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
Apr 21 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中GET变量的使用
2006/10/09 PHP
php cookies中删除的一般赋值方法
2011/05/07 PHP
简单实用的PHP防注入类实例
2014/12/05 PHP
PHP 500报错的快速解决方法
2016/12/14 PHP
用nodejs访问ActiveX对象,以操作Access数据库为例。
2011/12/15 NodeJs
JavaScript避免内存泄露及内存管理技巧
2014/09/05 Javascript
JS文字球状放大效果代码分享
2015/08/19 Javascript
javascirpt实现2个iframe之间传值的方法
2016/06/30 Javascript
JavaScript实现简单图片轮播效果
2017/08/21 Javascript
浅谈vue中数据双向绑定的实现原理
2017/09/14 Javascript
webpack引入eslint配置详解
2018/01/22 Javascript
vue2.x集成百度UEditor富文本编辑器的方法
2018/09/21 Javascript
Vue实现移动端页面切换效果【推荐】
2018/11/13 Javascript
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
2019/04/04 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
2019/12/07 Javascript
原生js实现html手机端城市列表索引选择城市
2020/06/24 Javascript
JS实现鼠标按下拖拽效果
2020/07/23 Javascript
[04:29]2016国际邀请赛中国区预选赛Ehome战队教练采访
2016/06/27 DOTA
详解Python的collections模块中的deque双端队列结构
2016/07/07 Python
详解Python中的静态方法与类成员方法
2017/02/28 Python
用virtualenv建立多个Python独立虚拟开发环境
2017/07/06 Python
python 脚本生成随机 字母 + 数字密码功能
2018/05/26 Python
Python 找到列表中满足某些条件的元素方法
2018/06/26 Python
wtfPython—Python中一组有趣微妙的代码【收藏】
2018/08/31 Python
从当地商店送来的杂货:Instacart
2018/08/19 全球购物
日本亚马逊官方网站:Amazon.co.jp
2020/04/14 全球购物
Linux文件操作命令都有哪些
2015/02/27 面试题
艺术系应届生的自我评价
2013/10/19 职场文书
2014年情人节活动方案
2014/02/16 职场文书
小学生保护环境倡议书
2014/05/15 职场文书
幼儿教师求职信
2014/05/24 职场文书
2014年组织部工作总结
2014/11/14 职场文书
个人总结怎么写
2015/02/26 职场文书
小程序wx.getUserProfile接口的具体使用
2021/06/02 Javascript
详解jQuery的核心函数和事件处理
2022/02/18 jQuery
Golang gRPC HTTP协议转换示例
2022/06/16 Golang