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 相关文章推荐
10款非常有用的 Ajax 插件分享
Mar 14 Javascript
DOM 事件流详解
Jan 20 Javascript
JQuery中serialize() 序列化
Mar 13 Javascript
jquery编写Tab选项卡滚动导航切换特效
Jul 17 Javascript
JavaScript:Array类型全面解析
May 19 Javascript
使用three.js 画渐变的直线
Jun 05 Javascript
Vue 短信验证码组件开发详解
Feb 14 Javascript
原生js实现日期计算器功能
Feb 17 Javascript
js实现图片加载淡入淡出效果
Apr 07 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
May 07 Javascript
JS库之wow.js使用方法
Sep 14 Javascript
Vue OpenLayer测距功能的实现
Apr 20 Vue.js
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的declare控制符和ticks教程(附示例)
2014/03/21 PHP
Windows下的PHP安装文件线程安全和非线程安全的区别
2014/04/23 PHP
Smarty中调用FCKeditor的方法
2014/10/27 PHP
2017年最新PHP经典面试题目汇总(上篇)
2017/03/17 PHP
PHP数字金额转换成中文大写显示
2019/01/05 PHP
提高Laravel应用性能方法详解
2019/06/24 PHP
JS中彻底删除JSON对象组成的数组中的元素
2020/09/22 PHP
Three.js源码阅读笔记(光照部分)
2012/12/27 Javascript
手机平板等移动端适配跳转URL的js代码
2014/01/25 Javascript
js字符串日期yyyy-MM-dd转化为date示例代码
2014/03/06 Javascript
jQuery实现异步获取json数据的2种方式
2014/08/29 Javascript
比较常见的javascript中定义函数的区别
2015/11/09 Javascript
AngularJS初始化静态模板详解
2016/01/14 Javascript
利用纯Vue.js构建Bootstrap组件
2016/11/03 Javascript
js实现楼层导航功能
2017/02/23 Javascript
VUE element-ui 写个复用Table组件的示例代码
2017/11/18 Javascript
微信小程序使用Promise简化回调
2018/02/06 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
2018/10/10 Javascript
通过实例了解Nodejs模块系统及require机制
2020/07/16 NodeJs
Vue如何实现变量表达式选择器
2021/02/18 Vue.js
python中使用psutil查看内存占用的情况
2018/06/11 Python
python排序函数sort()与sorted()的区别
2018/09/18 Python
基于python求两个列表的并集.交集.差集
2020/02/10 Python
深入理解Tensorflow中的masking和padding
2020/02/24 Python
浅谈Python线程的同步互斥与死锁
2020/03/22 Python
使用python批量转换文件编码为UTF-8的实现
2020/04/03 Python
雅诗兰黛旗下走天然植物路线的彩妆品牌:Prescriptives
2016/08/14 全球购物
Canon佳能美国官方商店:购买数码相机、数码单反相机、镜头和打印机
2016/11/15 全球购物
总经理岗位职责描述
2014/02/08 职场文书
观看《永远的雷锋》心得体会
2014/03/12 职场文书
中国好声音华少广告词
2014/03/17 职场文书
乐观自信演讲稿范文
2014/05/21 职场文书
提拔干部考察材料
2014/05/26 职场文书
工作自我推荐信范文
2015/03/25 职场文书
OpenCV-Python实现轮廓拟合
2021/06/08 Python