快捷導(dǎo)航

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

更新時(shí)間：2018年10月28日 15:45:50 作者：leejay6567

Electron是開源的框架，可以使用h5來開發(fā)跨平臺pc桌面應(yīng)用，這樣前端開發(fā)這可以開發(fā)桌面應(yīng)用了。這篇文章主要介紹了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ù)傳的問題。

方案流程圖：