Electron中實(shí)現(xiàn)大文件上傳和斷點(diǎn)續(xù)傳功能
Electron官網(wǎng)的描述:Electron是由Github開發(fā),用HTML,CSS和JavaScript來構(gòu)建跨平臺桌面應(yīng)用程序的一個(gè)開源庫。 Electron通過將Chromium和Node.js合并到同一個(gè)運(yùn)行時(shí)環(huán)境中,并將其打包為Mac,Windows和Linux系統(tǒng)下的應(yīng)用來實(shí)現(xiàn)這一目的。
從官網(wǎng)的描述我們可以簡單的概括,Electron是開源的框架,可以使用h5來開發(fā)跨平臺pc桌面應(yīng)用,這樣前端開發(fā)這可以開發(fā)桌面應(yīng)用了。由于它是基于Chromium和Node.js開發(fā)的,所以在Electron中既可以使用瀏覽器中的api也可以使用node的api。
下面我們在Electron中實(shí)現(xiàn)文件的上傳以及斷點(diǎn)續(xù)傳。網(wǎng)上關(guān)于h5的上傳下載的案例已經(jīng)非常多,但是關(guān)于大文件的上傳和續(xù)傳的很少。
首先上傳方案,我們通過將大文件進(jìn)行分片處理,將大文件切割成固定大小的分片。通過node的fs.createReadStream方法實(shí)現(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){
//計(jì)算每塊的結(jié)束位置
let enddata = Math.min(size, (i + 1) * chunkSize);
let arr = [];
//創(chuàng)建一個(gè)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在該分片讀取完成時(shí)觸發(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 + ‘‘);//第幾個(gè)分片,從0開始
formdata.append("chunks", pieces + ‘‘);//分片數(shù)
formdata.append("name", name);//文件名
post(formdata)//這里是偽代碼,實(shí)現(xiàn)上傳,開發(fā)者自己實(shí)現(xiàn)
}
}
以上代碼就是上傳的核心部分,我們首先讀取文件的基本信息,如路徑,大小進(jìn)行分塊,然后將每塊上傳,我們上傳循環(huán)上傳整個(gè)文件的分片,就循環(huán)調(diào)用uploadpiece方法。那么我們怎么實(shí)現(xiàn)斷點(diǎn)續(xù)傳呢?上面的代碼中我們計(jì)算每塊的md5值,這里計(jì)算每個(gè)md5值就是為了斷點(diǎn)續(xù)傳使用。我們每次上傳文件前,我們會先調(diào)用預(yù)上傳接口,預(yù)上傳接口中,前端傳入fileId,后端會將改文件已經(jīng)上傳的分塊的md5數(shù)組傳給前端,前端將該文件的分塊的md5值和后端返回的md5值進(jìn)行逐個(gè)對比,跳過已經(jīng)上傳的分塊。這樣就實(shí)現(xiàn)了大文件的上傳和斷點(diǎn)續(xù)傳的問題。
方案流程圖:

總結(jié)
以上所述是小編給大家介紹的Electron中實(shí)現(xiàn)大文件上傳和斷點(diǎn)續(xù)傳功能,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時(shí)回復(fù)大家的!
- 使用electron制作滿屏心特效的示例代碼
- electron制作仿制qq聊天界面的示例代碼
- electron + vue項(xiàng)目實(shí)現(xiàn)打印小票功能及實(shí)現(xiàn)代碼
- electron中使用bootstrap的示例代碼
- 從零開始用electron手?jǐn)]一個(gè)截屏工具的示例代碼
- 使用electron將vue-cli項(xiàng)目打包成exe的方法
- 解決npm安裝Electron緩慢網(wǎng)絡(luò)超時(shí)導(dǎo)致失敗的問題
- 詳解Webpack實(shí)戰(zhàn)之構(gòu)建 Electron 應(yīng)用
- 詳解Angular CLI + Electron 開發(fā)環(huán)境搭建
- 關(guān)于node-bindings無法在Electron中使用的解決辦法
相關(guān)文章
js時(shí)間戳和c#時(shí)間戳互轉(zhuǎn)方法(推薦)
下面小編就為大家?guī)硪黄猨s時(shí)間戳和c#時(shí)間戳互轉(zhuǎn)方法(推薦)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02
Mint-UI時(shí)間組件起始時(shí)間問題及時(shí)間插件使用
這篇文章主要介紹了Mint-UI時(shí)間組件起始時(shí)間問題的解決方法,非常不錯,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-08-08
Js setInterval與setTimeout(定時(shí)執(zhí)行與循環(huán)執(zhí)行)的代碼(可以傳入?yún)?shù))
最近在做項(xiàng)目時(shí)用到了定時(shí)執(zhí)行的js方法,setInterval與setTimeout時(shí)間長了不用有些生疏了,所以自己總結(jié)了一下,記下來,以便以后使用。2010-06-06
微信小程序 連續(xù)旋轉(zhuǎn)動畫(this.animation.rotate)詳解
這篇文章主要介紹了微信小程序 連續(xù)旋轉(zhuǎn)動畫(this.animation.rotate)詳解的相關(guān)資料,需要的朋友可以參考下2017-04-04
JavaScript之創(chuàng)意時(shí)鐘項(xiàng)目(實(shí)例講解)
下面小編就為大家?guī)硪黄狫avaScript之創(chuàng)意時(shí)鐘項(xiàng)目。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10

