大檔案切片上傳 Vue NodeJS

2021-10-12 03:02:14 字數 2889 閱讀 2656

大檔案前台切成若干份2m小檔案,分別傳輸給後台,後台分別寫入硬碟,在最後一片被後台接收後,讀取所有切片並合併成為原始大檔案

主要實現兩種方式的大資料切片傳輸

前台切片,後台合併

node後台切片,另一伺服器端合併

大檔案上傳時,前端切片,上傳後,後端組合

先上介面

});//這裡定時,是做非同步序列,等上執行完後,再執行下面

settimeout(function()

進行同步處理

async.eachlimit(aname,1,function(item,callback))

callback();

});},function(err)});

res.writehead(200, );

res.end(data);//返回資料

});},50);

}else);

res.writehead(200, );

res.end(data);//返回資料

}}catch(err)

});};

關鍵點在於,node後台的切片因為沒有html中的file api, 無法利用file物件繼承自blob的slice方法,以進行切片,進一步去做合併。經過嘗試可以利用node提供的buffer中的slice進行切片

大部分邏輯同上,故這裡只貼出關鍵**

let distfile = fs.readfilesync(

__dirname + "/../datastorage/" + serviceitem.id + ".zip"

);let largrfile = buffer.from(distfile);

let name = serviceitem.name+'.zip', //檔名

size = largrfile.length, //總大小

succeed = 0; //當前上傳數

let shardsize = 2 * 1024 * 1024, //以2mb為乙個分片

shardcount = math.ceil(size / shardsize); //總片數

/*生成上傳分片檔案順充,通過async.eachlimit()進行同步上傳

attr裡面是[0,1,2,3...,最後一位]

*/let attr = ;

for (let i = 0; i < shardcount; ++i)

let rp=res;

try;

obj["data"] = minfile;

obj["name"] = name;

obj["total"] = shardcount;

obj["index"] = i + 1;

obj["size"] = size;

obj["start"] = start;

obj["end"] = end;

// // http://localhost:8898/upload 測試

await axios

.post("api", obj, )

.then((axiosres) =>

ws.on('open',()=>)

ws.on('message',(data)=>else

})} else if (axiosres.data.code == 1) );

rp.end(data);//返回資料

}//生成當前進度百分比

// _this.percentage=math.round(succeed/shardcount*100);

console.log(

"進度: " + math.round((succeed / shardcount) * 100)

);// callback()

});},

function (err) )

return}}

);}catch(err)

let fs=require('fs');

let async = require('async');//非同步模組

// 切片的臨時儲存

let dirpath=__dirname+"/../uploadfiles/tep/";

let index=req.body['index'];//當前片數

let total=req.body['total'];//總片數

let name=req.body['name'];//檔名稱

let url= dirpath+'/'+name.split('.')[0]+'_'+index+'.'+name.split('.')[1];//臨時bolb檔案新名字

trylet bf=

進行同步處理

async.eachlimit(aname,1,function(item,callback))

callback();

});},function(err)});

res.writehead(200, );

res.end(data);//返回資料

});},50)

}else);

res.writehead(200, );

res.end(data);//返回資料

}}catch(err)

PHP大檔案上傳(切片上傳)

由於專案需要,經常要上傳幾百兆或者幾個g的檔案。考慮到檔案過大,直接上傳的話會超出php設定的表單提交限制大小,同時會占用較多的系統資源。於是考慮將檔案進行切片,然後將切片後的檔案統一上傳至檔案目錄,待全部上傳成功之後再將其合併成乙個檔案,同時後台md5驗證是否上傳成功。上面的思路是目前上傳大容量檔...

上傳大檔案 關於大檔案上傳

js計算檔案md5使用spark md5.js,據說這個庫使用的是世界上最快的md5演算法。js對檔案切片並使用ajax上傳切片 let size file.size 獲取檔案大小 const shardsize 1024 1024 塊大小1mb let shardcount math.ceil s...

web直傳oss之大檔案上傳,切片上傳,斷點續傳

本人菜鳥乙個,大神輕噴。偶感瓶頸與今日起開始記錄平時專案中的難題以及平時的心得。最近專案中剛好有讓前端單獨直接接入阿里的sdk實現web直傳oss的功能。廢話不多說直接官方文件看一下,彌補一下我的未知世界,發現文件還是比較好理解的。這裡貼下官網的 片段 我按照我這邊專案走的流程 第一步 首先從後端獲...