Electron中實現(xiàn)大文件上傳和斷點續(xù)傳功能
Electron官網(wǎng)的描述:Electron是由Github開發(fā),用HTML,CSS和JavaScript來構(gòu)建跨平臺桌面應(yīng)用程序的一個開源庫。 Electron通過將Chromium和Node.js合并到同一個運行時環(huán)境中,并將其打包為Mac,Windows和Linux系統(tǒng)下的應(yīng)用來實現(xiàn)這一目的。
從官網(wǎng)的描述我們可以簡單的概括,Electron是開源的框架,可以使用h5來開發(fā)跨平臺pc桌面應(yīng)用,這樣前端開發(fā)這可以開發(fā)桌面應(yīng)用了。由于它是基于Chromium和Node.js開發(fā)的,所以在Electron中既可以使用瀏覽器中的api也可以使用node的api。
下面我們在Electron中實現(xiàn)文件的上傳以及斷點續(xù)傳。網(wǎng)上關(guān)于h5的上傳下載的案例已經(jīng)非常多,但是關(guān)于大文件的上傳和續(xù)傳的很少。
首先上傳方案,我們通過將大文件進行分片處理,將大文件切割成固定大小的分片。通過node的fs.createReadStream方法實現(xiàn):
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);//總共的分片數(shù) function uploadPiece (i){ //計算每塊的結(jié)束位置 let enddata = Math.min(size, (i + 1) * chunkSize); let arr = []; //創(chuàng)建一個readStream對象,根據(jù)文件起始位置和結(jié)束位置讀取固定的分片 let readStream = fs.createReadStream(path, { start: i * chunkSize, end: enddata-1 }); //on data讀取數(shù)據(jù) readStream.on(‘data‘, (data)=>{ arr.push(data) }) //on end在該分片讀取完成時觸發(fā) readStream.on(‘end‘, ()=>{ //這里服務(wù)端只接受blob對象,需要把原始的數(shù)據(jù)流轉(zhuǎn)成blob對象,這塊為了配合后端才轉(zhuǎn) let blob = new Blob(arr) //新建formdata數(shù)據(jù)對象 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 + ‘‘); // 數(shù)字30被轉(zhuǎn)換成字符串"30" formdata.append("chunk", i + ‘‘);//第幾個分片,從0開始 formdata.append("chunks", pieces + ‘‘);//分片數(shù) formdata.append("name", name);//文件名 post(formdata)//這里是偽代碼,實現(xiàn)上傳,開發(fā)者自己實現(xiàn) } }
以上代碼就是上傳的核心部分,我們首先讀取文件的基本信息,如路徑,大小進行分塊,然后將每塊上傳,我們上傳循環(huán)上傳整個文件的分片,就循環(huán)調(diào)用uploadpiece方法。那么我們怎么實現(xiàn)斷點續(xù)傳呢?上面的代碼中我們計算每塊的md5值,這里計算每個md5值就是為了斷點續(xù)傳使用。我們每次上傳文件前,我們會先調(diào)用預(yù)上傳接口,預(yù)上傳接口中,前端傳入fileId,后端會將改文件已經(jīng)上傳的分塊的md5數(shù)組傳給前端,前端將該文件的分塊的md5值和后端返回的md5值進行逐個對比,跳過已經(jīng)上傳的分塊。這樣就實現(xiàn)了大文件的上傳和斷點續(xù)傳的問題。
方案流程圖:
總結(jié)
以上所述是小編給大家介紹的Electron中實現(xiàn)大文件上傳和斷點續(xù)傳功能,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時回復(fù)大家的!
- 使用electron制作滿屏心特效的示例代碼
- electron制作仿制qq聊天界面的示例代碼
- electron + vue項目實現(xiàn)打印小票功能及實現(xiàn)代碼
- electron中使用bootstrap的示例代碼
- 從零開始用electron手擼一個截屏工具的示例代碼
- 使用electron將vue-cli項目打包成exe的方法
- 解決npm安裝Electron緩慢網(wǎng)絡(luò)超時導(dǎo)致失敗的問題
- 詳解Webpack實戰(zhàn)之構(gòu)建 Electron 應(yīng)用
- 詳解Angular CLI + Electron 開發(fā)環(huán)境搭建
- 關(guān)于node-bindings無法在Electron中使用的解決辦法
相關(guān)文章
用函數(shù)式編程技術(shù)編寫優(yōu)美的 JavaScript_ibm
函數(shù)式編程語言在學(xué)術(shù)領(lǐng)域已經(jīng)存在相當(dāng)長一段時間了,但是從歷史上看,它們沒有豐富的工具和庫可供使用。隨著 .NET 平臺上的 Haskell 的出現(xiàn),函數(shù)式編程變得更加流行。一些傳統(tǒng)的編程語言,例如 C++ 和 JavaScript,引入了由函數(shù)式編程提供的一些構(gòu)造和特性。在許多情況下,JavaScript 的重復(fù)代碼導(dǎo)致了一些拙劣的編碼。如果使用函數(shù)式編程,就可以避免這些問題。此外,可以利用函數(shù)式編程風(fēng)格編寫更加優(yōu)美的回調(diào)。2008-05-05JavaScript數(shù)據(jù)結(jié)構(gòu)yocto queue隊列鏈表代碼分析
這篇文章主要為大家介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)yocto queue隊列鏈表代碼分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-12-12JS復(fù)制內(nèi)容到剪切板的實例代碼(兼容IE與火狐)
這篇文章主要介紹了JS復(fù)制內(nèi)容到剪切板的實例代碼(兼容IE與火狐)。需要的朋友可以過來參考下,希望對大家有所幫助2013-11-11JavaScript中各種二進制對象關(guān)系的深入講解
JavaScript中用于表示二進制對象有,Blob對象、和 ArrayBuffer 對象,這篇文章主要給大家介紹了關(guān)于JavaScript中各種二進制對象關(guān)系的相關(guān)資料,需要的朋友可以參考下2021-09-09使用smartupload組件實現(xiàn)jsp+jdbc上傳下載文件實例解析
這篇文章主要介紹了使用smartupload組件實現(xiàn)jsp+jdbc上傳下載文件實例解析,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-01-01頁面下沉抖動效果-網(wǎng)站HTTP連接沒有效果-PC上有效果
頁面下沉抖動效果實現(xiàn)代碼,代碼少,功能還可以2008-05-05