Electron中實現大文件上傳和斷點續傳功能

Electron官網的描述：Electron是由Github開發，用HTML，CSS和JavaScript來構建跨平臺桌面應用程序的一個開源庫。 Electron經過將Chromium和Node.js合併到同一個運行時環境中，並將其打包爲Mac，Windows和Linux系統下的應用來實現這一目的。

從官網的描述咱們能夠簡單的歸納，Electron是開源的框架，能夠使用h5來開發跨平臺pc桌面應用，這樣前端開發這能夠開發桌面應用了。因爲它是基於Chromium和Node.js開發的，因此在Electron中既能夠使用瀏覽器中的api也能夠使用node的api。

下面咱們在Electron中實現文件的上傳以及斷點續傳。網上關於h5的上傳下載的案例已經很是多，可是關於大文件的上傳和續傳的不多。

首先上傳方案，咱們經過將大文件進行分片處理，將大文件切割成固定大小的分片。經過node的fs.createReadStream方法實現：

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);//總共的分片數  
    function uploadPiece (i){ 
        //計算每塊的結束位置
        let enddata = Math.min(size, (i + 1) * chunkSize);
        let arr = [];
       //建立一個readStream對象，根據文件起始位置和結束位置讀取固定的分片
       let readStream = fs.createReadStream(path, { start: i * chunkSize, end: enddata-1 });
            //on data讀取數據
            readStream.on('data', (data)=>{
                arr.push(data)
            }) 
            //on end在該分片讀取完成時觸發
            readStream.on('end', ()=>{
                //這裏服務端只接受blob對象，須要把原始的數據流轉成blob對象，這塊爲了配合後端才轉
                let blob = new Blob(arr)
                //新建formdata數據對象
                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 + ''); // 數字30被轉換成字符串"30"
                formdata.append("chunk", i + '');//第幾個分片，從0開始
                formdata.append("chunks", pieces + '');//分片數
                formdata.append("name", name);//文件名
                post(formdata)//這裏是僞代碼，實現上傳，開發者本身實現
    }
}            

以上代碼就是上傳的核心部分，咱們首先讀取文件的基本信息，如路徑，大小進行分塊，而後將每塊上傳，咱們上傳循環上傳整個文件的分片，就循環調用uploadpiece方法。那麼咱們怎麼實現斷點續傳呢？上面的代碼中咱們計算每塊的md5值，這裏計算每一個md5值就是爲了斷點續傳使用。咱們每次上傳文件前，咱們會先調用預上傳接口，預上傳接口中，前端傳入fileId，後端會將改文件已經上傳的分塊的md5數組傳給前端，前端將該文件的分塊的md5值和後端返回的md5值進行逐個對比，跳過已經上傳的分塊。這樣就實現了大文件的上傳和斷點續傳的問題。

方案流程圖：