在电子中实现大文件上传和断点续传功能

electronic官网描述：electronic是Github开发的开源库，使用HTML、CSS和JavaScript构建跨平台桌面应用。Electron通过将Chromium和Node.js合并到同一个运行时环境中，并将其打包为Mac、Windows和Linux系统下的应用程序来实现这一目标。

从官网的描述中，我们可以简单概括为，electronic是一个开源框架，h5可以用来开发跨平台的pc桌面应用，让前端开发可以开发桌面应用。因为它是基于Chromium和node.js开发的，所以既可以使用浏览器中的api，也可以使用电子版中node的api。

接下来，我们实现了文件上传和断点续传。网上上传下载h5的案例很多，但是上传并持续传输大文件的案例很少。

首先上传方案，我们通过对大文件进行切片，将大文件切割成固定大小的切片。由节点的fs.createReadStream方法实现：

singleUpload函数(file){ let path=file . path；//文件本地路径让stats=fs.statSync(路径)；//读取文件信息让chunkSize=3 * 1024 * 1024//每个块的大小为3M let size=stats.size//文件大小let pieces=math.ceil(大小/块大小)；//切片总数函数uploadPiece (i){ //计算每个块的结束位置让结束数据=math.min (size)，(I ^ 1)*块大小；让arr=[]；//创建一个readStream对象，读取固定片段让readstream=fs。根据文件开始位置和结束位置创建readstream(路径，{start3360i *区块大小，end : end data-1 })；//on data读取data readstream.on ('data '，(data)={arr.push (data)})//on end触发readstream.on ('end '，()={//这里，服务器只接受blob对象，需要将原始数据流转换为blob对象。为了配合后端，这一块被转移到让blob=new Blob(arr) //new formdata数据对象var form data=new form data()；让MD5 VaL=MD5(Buffer . concat(arr))；formdata.append('file '，blob)；console.log('blob.size '，blob.size) formdata.append('md5 '，MD5 VaL)；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值，跳过上传的块。这样就实现了大文件上传和断点续传的问题。

方案流程图：

摘要

以上是边肖介绍的《电子》中上传大文件，断点续传的功能。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你的！