<span id="mktg5"></span>

<i id="mktg5"><meter id="mktg5"></meter></i>

        <label id="mktg5"><meter id="mktg5"></meter></label>
        最新文章專題視頻專題問答1問答10問答100問答1000問答2000關(guān)鍵字專題1關(guān)鍵字專題50關(guān)鍵字專題500關(guān)鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關(guān)鍵字專題關(guān)鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
        問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
        當(dāng)前位置: 首頁 - 科技 - 知識百科 - 正文

        Electron中實現(xiàn)大文件上傳和斷點續(xù)傳功能

        來源:懂視網(wǎng) 責(zé)編:小采 時間:2020-11-27 22:05:38
        文檔

        Electron中實現(xiàn)大文件上傳和斷點續(xù)傳功能

        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)這一目的。 從
        推薦度:
        導(dǎo)讀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)這一目的。 從

        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

        文檔

        Electron中實現(xiàn)大文件上傳和斷點續(xù)傳功能

        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)這一目的。 從
        推薦度:
        • 熱門焦點

        最新推薦

        猜你喜歡

        熱門推薦

        專題
        Top
        主站蜘蛛池模板: 亚洲成色999久久网站| 亚洲av无码不卡一区二区三区| 亚洲va成无码人在线观看| 3d成人免费动漫在线观看| 亚洲第一页中文字幕| 久久久久久国产a免费观看黄色大片 | 中出五十路免费视频| 国产gv天堂亚洲国产gv刚刚碰| yellow免费网站| 亚洲s色大片在线观看| h视频在线观看免费完整版| 亚洲性无码av在线| 天天干在线免费视频| 深夜a级毛片免费视频| 国产亚洲精品福利在线无卡一| 国内精品久久久久影院免费 | 久久亚洲私人国产精品vA| 91短视频在线免费观看| 亚洲六月丁香婷婷综合| 免费无码看av的网站| 免费人人潮人人爽一区二区| 亚洲中文字幕无码一久久区| 久久青草免费91观看| 亚洲成a人片在线观看精品| 国产无遮挡又黄又爽免费视频| 男女猛烈激情xx00免费视频| 亚洲精品成人无限看| 中文字幕av无码无卡免费| 欧洲乱码伦视频免费国产| 亚洲av丰满熟妇在线播放| 嫩草影院在线免费观看| 大妹子影视剧在线观看全集免费| 亚洲激情黄色小说| 亚洲成年看片在线观看| 99热在线精品免费播放6| 亚洲av成本人无码网站| 亚洲国产精华液网站w| 性xxxx视频播放免费| 中国一级特黄高清免费的大片中国一级黄色片 | 香蕉视频在线观看亚洲| 青草草在线视频永久免费|