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ù)大家的!
聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com