electron中实现大文件上传和断点续传功能(代码片段)

leejay6567 leejay6567     2023-01-12     813

关键词:

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值进行逐个对比,跳过已经上传的分块。这样就实现了大文件的上传和断点续传的问题。

方案流程图:

技术分享图片

 

html超大文件上传和断点续传的实现

需求:项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在500M内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以501M来进行限制。 第一步:前端修改由于项目使用的是BJUI前端框架,... 查看详情

vue中实现文件上传下载的三种解决方案(推荐)

一、功能性需求与非功能性需求要求操作便利,一次选择多个文件和文件夹进行上传;支持PC端全平台操作系统,Windows,Linux,Mac支持文件和文件夹的批量下载,断点续传。刷新页面后继续传输。关闭浏览器后保留进度信息。支持... 查看详情

超大文件上传和断点续传的源代码

总结一下大文件分片上传和断点续传的问题。因为文件过大(比如1G以上),必须要考虑上传过程网络中断的情况。http的网络请求中本身就已经具备了分片上传功能,当传输的文件比较大时,http协议自动会将文件切片(分块)... 查看详情

求php以上超大文件上传和断点续传服务器的实现

php以上超大文件上传和断点续传服务器的实现现在这个时代文件存储基本分离到了单独的存储服务上面,比如说阿里云的OSS,七牛云的云存储等等.考虑这些第三方服务的话,那么你的大文件上传和断点续传等功能实现只需要去对接... 查看详情

b/s之大文件分段上传断点续传

4GB以上超大文件上传和断点续传服务器的实现随着视频网站和大数据应用的普及,特别是高清视频和4K视频应用的到来,超大文件上传已经成为了日常的基础应用需求。但是在很多情况下,平台运营方并没有大文件上传和断点续... 查看详情

javascript之大文件分段上传断点续传

​需求:项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在500M内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以501M来进行限制。第一步:前端修改由于项目使用的是BJUI前端框架,并... 查看详情

面试官:请你实现一个大文件上传和断点续传(代码片段)

...花了一段时间整理了下思路,那么究竟该如何实现一个大文件上传,以及在上传中如何实现断点续传的功能呢?本文将从零搭建前端和服务端,实现一个大文件上传和断点续 查看详情

完整版断点续传秒传,支持超大大大文件_支持重定义文件名和路径

需求:支持大文件批量上传(20G)和下载,同时需要保证上传期间用户电脑不出现卡死等体验;内网百兆网络上传速度为12MB/S服务器内存占用低支持文件夹上传,文件夹中的文件数量达到1万个以上,且包含层级结构。支持PC端全... 查看详情

java实现文件的断点续传

​需求:项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在500M内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以501M来进行限制。第一步:前端修改由于项目使用的是BJUI前端框架,并... 查看详情

vue解决大文件断点续传

​需求:项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在500M内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以501M来进行限制。第一步:前端修改由于项目使用的是BJUI前端框架,并... 查看详情

java使用webuploader做大文件的分块和断点续传

​需求:项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在500M内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以501M来进行限制。第一步:前端修改由于项目使用的是BJUI前端框架,并... 查看详情

jsp利用webuploader实现超大文件分片上传断点续传

​需求:项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在500M内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以501M来进行限制。第一步:前端修改由于项目使用的是BJUI前端框架,并... 查看详情

超大文件上传和断点续传的组件

...、概述 所谓断点续传,其实只是指下载,也就是要从文件已经下载的地方开始继续下载。在以前版本的HTTP协议是不支持断点的,HTTP/1.1开始就支持了。一般断点下载时才用到Range和Content-Range实体头。HTTP协议本身不支持断点... 查看详情

b/s中实现文件上传下载的三种解决方案(推荐)

随着视频网站和大数据应用的普及,特别是高清视频和4K视频应用的到来,超大文件上传已经成为了日常的基础应用需求。但是在很多情况下,平台运营方并没有大文件上传和断点续传的开发经验,往往在网上找一些简单的PHP或... 查看详情

超大文件上传和断点续传的源代码

总结一下大文件分片上传和断点续传的问题。因为文件过大(比如1G以上),必须要考虑上传过程网络中断的情况。http的网络请求中本身就已经具备了分片上传功能,当传输的文件比较大时,http协议自动会将文件切片(分块)... 查看详情

如何用xmlhttprequest实现大文件上传和断点续传

...象,能够实现断店续传。我说一下我的思路吧:首先获取文件的MD5(spark-md5.js),然后利用文件对象的slice方法进行切割文件,分段上传到后台,后台组装文件然后校验MD5值;我也刚好在做,觉得可行本回答被提问者采纳 查看详情

支持ie低版本的上传大文件切割上传断点续传秒传

...swfupload2、http://download.csdn.net/detail/rememberme001/9873136支持大文件传输,先把大文件分割成每个2M的小文件分批上传,再组合成一个大文件。支持断点续传,MD5校验实现妙传功能,支 查看详情

php大文件上传,支持断点续传,求具体方案、源码或者文件上传插件

...的.因为普通的浏览器端没那功能.(上传的时候还是会整个文件编码发送)想实现的话,客户端需要插件了,客户端可以使用flex实现.服务端,PHP可以写个webservice接受文件.追问有没有现成的flex和代码追答这个我这边没有.你可以在网上... 查看详情