欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

React+Node實現(xiàn)大文件分片上傳、斷點續(xù)傳秒傳思路

 更新時間:2022年02月09日 11:10:55   作者:lin嘟嘟嘟  
本文主要介紹了React+Node實現(xiàn)大文件分片上傳、斷點續(xù)傳秒傳思路,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下

1、整體思路

  • 將文件切成多個小的文件;
  • 將切片并行上傳;
  • 所有切片上傳完成后,服務(wù)器端進(jìn)行切片合成;
  • 當(dāng)分片上傳失敗,可以在重新上傳時進(jìn)行判斷,只上傳上次失敗的部分實現(xiàn)斷點續(xù)傳;
  • 當(dāng)切片合成為完整的文件,通知客戶端上傳成功;
  • 已經(jīng)傳到服務(wù)器的完整文件,則不需要重新上傳到服務(wù)器,實現(xiàn)秒傳功能;

2、實現(xiàn)步驟

2.1 文件切片加密

利用MD5 , MD5 是文件的唯一標(biāo)識,可以利用文件的 MD5 查詢文件的上傳狀態(tài);

讀取進(jìn)度條進(jìn)度,生成MD5:

實現(xiàn)結(jié)果:

實現(xiàn)代碼如下:

const md5File = (file) => {
? ? return new Promise((resolve, reject) => {
? ? ? // 文件截取
? ? ? let blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice,
? ? ? ? chunkSize = file?.size / 100,
? ? ? ? chunks = 100,
? ? ? ? currentChunk = 0,
? ? ? ? spark = new SparkMD5.ArrayBuffer(),
? ? ? ? fileReader = new FileReader();

? ? ? fileReader.onload = function (e) {
? ? ? ? console.log('read chunk nr', currentChunk + 1, 'of', chunks);
? ? ? ? spark.append(e.target.result);
? ? ? ? currentChunk += 1;

? ? ? ? if (currentChunk < chunks) {
? ? ? ? ? loadNext();
? ? ? ? } else {
? ? ? ? ? let result = spark.end()
? ? ? ? ? resolve(result)
? ? ? ? }
? ? ? };

? ? ? fileReader.onerror = function () {
? ? ? ? message.error('文件讀取錯誤')
? ? ? };

? ? ? const loadNext = () => {
? ? ? ? const start = currentChunk * chunkSize,
? ? ? ? ? end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize;

? ? ? ? // 文件切片
? ? ? ? fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
? ? ? ? // 檢查進(jìn)度條
? ? ? ? dispatch({ type: 'check', checkPercent: currentChunk + 1 })
? ? ? }

? ? ? loadNext();
? ? })
? }

2.2 查詢上傳文件狀態(tài)

利用當(dāng)前md5去查詢服務(wù)器創(chuàng)建的md5文件夾是否存在,如果存在則返回該目錄下的所有分片;

前端只需要拿MD5和文件名去請求后端,這里就不在列出來;
node端代碼邏輯:

app.get('/check/file', (req, resp) => {
? let query = req.query
? let fileName = query.fileName
? let fileMd5Value = query.fileMd5Value
? // 獲取文件Chunk列表
? getChunkList(
? ? ? path.join(uploadDir, fileName),
? ? ? path.join(uploadDir, fileMd5Value),
? ? ? data => {
? ? ? ? ? resp.send(data)
? ? ? }
? )
})

// 獲取文件Chunk列表
async function getChunkList(filePath, folderPath, callback) {
? let isFileExit = await isExist(filePath)
? let result = {}
? // 如果文件已在存在, 不用再繼續(xù)上傳, 真接秒傳
? if (isFileExit) {
? ? ? result = {
? ? ? ? ? stat: 1,
? ? ? ? ? file: {
? ? ? ? ? ? ? isExist: true,
? ? ? ? ? ? ? name: filePath
? ? ? ? ? },
? ? ? ? ? desc: 'file is exist'
? ? ? }
? } else {
? ? ? let isFolderExist = await isExist(folderPath)
? ? ? // 如果文件夾(md5值后的文件)存在, 就獲取已經(jīng)上傳的塊
? ? ? let fileList = []
? ? ? if (isFolderExist) {
? ? ? ? ? fileList = await listDir(folderPath)
? ? ? }
? ? ? result = {
? ? ? ? ? stat: 1,
? ? ? ? ? chunkList: fileList,
? ? ? ? ? desc: 'folder list'
? ? ? }
? }
? callback(result)
}

2.3 秒傳

如果上傳的當(dāng)前文件已經(jīng)存在服務(wù)器目錄,則秒傳;

服務(wù)器端代碼已給出,前端根據(jù)返回的接口做判斷;

if (data?.file) {
? message.success('文件已秒傳')
? return
}

實現(xiàn)效果:

?

2.4 上傳分片、斷點續(xù)傳

檢查本地切片和服務(wù)器對應(yīng)的切片,如果沒有當(dāng)前切片則上傳,實現(xiàn)斷點續(xù)傳;
同步并發(fā)上傳所有的切片,維護(hù)上傳進(jìn)度條狀態(tài);
前端代碼:

/**
? ?* 上傳chunk
? ?* @param {*} fileMd5Value?
? ?* @param {*} chunkList?
? ?*/
? async function checkAndUploadChunk(file, fileMd5Value, chunkList) {
? ? let chunks = Math.ceil(file.size / chunkSize)
? ? const requestList = []
? ? for (let i = 0; i < chunks; i++) {
? ? ? let exit = chunkList.indexOf(i + "") > -1
? ? ? // 如果不存在,則上傳
? ? ? if (!exit) {
? ? ? ? requestList.push(upload({ i, file, fileMd5Value, chunks }))
? ? ? }
? ? }

? ? // 并發(fā)上傳
? ? if (requestList?.length) {
? ? ? await Promise.all(requestList)
? ? }
? }

?? ?// 上傳chunk
? function upload({ i, file, fileMd5Value, chunks }) {
? ? current = 0
? ? //構(gòu)造一個表單,F(xiàn)ormData是HTML5新增的
? ? let end = (i + 1) * chunkSize >= file.size ? file.size : (i + 1) * chunkSize
? ? let form = new FormData()
? ? form.append("data", file.slice(i * chunkSize, end)) //file對象的slice方法用于切出文件的一部分
? ? form.append("total", chunks) //總片數(shù)
? ? form.append("index", i) //當(dāng)前是第幾片 ? ??
? ? form.append("fileMd5Value", fileMd5Value)
? ? return axios({
? ? ? method: 'post',
? ? ? url: BaseUrl + "/upload",
? ? ? data: form
? ? }).then(({ data }) => {
? ? ? if (data.stat) {
? ? ? ? current = current + 1
? ? ? ? const uploadPercent = Math.ceil((current / chunks) * 100)
? ? ? ? dispatch({ type: 'upload', uploadPercent })
? ? ? }
? ? })
? }

Node端代碼:

app.all('/upload', (req, resp) => {
? const form = new formidable.IncomingForm({
? ? ? uploadDir: 'nodeServer/tmp'
? })
? form.parse(req, function(err, fields, file) {
? ? ? let index = fields.index
? ? ? let fileMd5Value = fields.fileMd5Value
? ? ? let folder = path.resolve(__dirname, 'nodeServer/uploads', fileMd5Value)
? ? ? folderIsExit(folder).then(val => {
? ? ? ? ? let destFile = path.resolve(folder, fields.index)
? ? ? ? ? copyFile(file.data.path, destFile).then(
? ? ? ? ? ? ? successLog => {
? ? ? ? ? ? ? ? ? resp.send({
? ? ? ? ? ? ? ? ? ? ? stat: 1,
? ? ? ? ? ? ? ? ? ? ? desc: index
? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? },
? ? ? ? ? ? ? errorLog => {
? ? ? ? ? ? ? ? ? resp.send({
? ? ? ? ? ? ? ? ? ? ? stat: 0,
? ? ? ? ? ? ? ? ? ? ? desc: 'Error'
? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? }
? ? ? ? ? )
? ? ? })
? })

實現(xiàn)效果:

存儲形式:

2.5 合成分片還原完整文件

當(dāng)所有的分片上傳完成,前端通知服務(wù)器端分片上傳完成,準(zhǔn)備合成;

前端代碼:

? /**
? ?* 所有的分片上傳完成,準(zhǔn)備合成
? ?* @param {*} file?
? ?* @param {*} fileMd5Value?
? ?*/
? function notifyServer(file, fileMd5Value) {
? ? let url = BaseUrl + '/merge?md5=' + fileMd5Value + "&fileName=" + file.name + "&size=" + file.size
? ? axios.get(url).then(({ data }) => {
? ? ? if (data.stat) {
? ? ? ? message.success('上傳成功')
? ? ? } else {
? ? ? ? message.error('上傳失敗')
? ? ? }
? ? })
? }

Node端代碼:

// 合成
app.all('/merge', (req, resp) => {
? let query = req.query
? let md5 = query.md5
? let fileName = query.fileName
? console.log(md5, fileName)
? mergeFiles(path.join(uploadDir, md5), uploadDir, fileName)
? resp.send({
? ? ? stat: 1
? })
})


// 合并文件
async function mergeFiles(srcDir, targetDir, newFileName) {
? let fileArr = await listDir(srcDir)
? fileArr.sort((x,y) => {
? ? ? return x-y;
? })
? // 把文件名加上文件夾的前綴
? for (let i = 0; i < fileArr.length; i++) {
? ? ? fileArr[i] = srcDir + '/' + fileArr[i]
? }
? concat(fileArr, path.join(targetDir, newFileName), () => {
? ? ? console.log('合成成功!')
? })
}

請求實現(xiàn):

合成文件效果:

3、總結(jié)

將文件切片,并發(fā)上傳切片,切片合成完整文件,實現(xiàn)分片上傳;
使用MD5標(biāo)識文件夾,得到唯一標(biāo)識;
分片上傳前通過文件 MD5 查詢已上傳切片列表,上傳時只上傳未上傳過的切片,實現(xiàn)斷點續(xù)傳;
檢查當(dāng)前上傳文件,如果已存在服務(wù)器,則不需要再次上傳,實現(xiàn)秒傳;

4、后續(xù)擴(kuò)展與思考

使用時間切片計算hash

當(dāng)文件過大時需要計算很久的hash,頁面不能做其他的操作,所以考慮使用React-Fiber的架構(gòu)理念,利用瀏覽器空閑時間去計算hash??紤]使用window.requestIdleCallback()函數(shù);

請求并發(fā)控制

假如一個文件過大,就會切割成許多的碎片,一次性發(fā)幾百個請求,這顯然是不行的;所以要考慮請求并發(fā)數(shù)控制;

5、源碼

地址:https://github.com/linhexs/file-upload.git

到此這篇關(guān)于React+Node實現(xiàn)大文件分片上傳、斷點續(xù)傳秒傳思路的文章就介紹到這了,更多相關(guān)React Node大文件分片上傳、斷點續(xù)傳內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • React路由參數(shù)傳遞與嵌套路由的實現(xiàn)詳細(xì)講解

    React路由參數(shù)傳遞與嵌套路由的實現(xiàn)詳細(xì)講解

    這篇文章主要介紹了React路由參數(shù)傳遞與嵌套路由的實現(xiàn),嵌套路由原則是可以無限嵌套,但是必須要讓使用二級路由的一級路由匹配到,否則不顯示,需要的朋友可以參考一下
    2022-09-09
  • React中使用Echarts無法顯示title、tooltip等組件的解決方案

    React中使用Echarts無法顯示title、tooltip等組件的解決方案

    這篇文章主要介紹了React中使用Echarts無法顯示title、tooltip等組件的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • React組件的創(chuàng)建與state同步異步詳解

    React組件的創(chuàng)建與state同步異步詳解

    這篇文章主要介紹了react組件實例屬性state,有狀態(tài)state的組件稱作復(fù)雜組件,沒有狀態(tài)的組件稱為簡單組件,狀態(tài)里存儲數(shù)據(jù),數(shù)據(jù)的改變驅(qū)動頁面的展示,本文結(jié)合實例代碼給大家詳細(xì)講解,需要的朋友可以參考下
    2023-03-03
  • 詳解超簡單的react服務(wù)器渲染(ssr)入坑指南

    詳解超簡單的react服務(wù)器渲染(ssr)入坑指南

    這篇文章主要介紹了詳解超簡單的react服務(wù)器渲染(ssr)入坑指南,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-02-02
  • react搭建在線編輯html的站點通過引入grapes實現(xiàn)在線拖拉拽編輯html

    react搭建在線編輯html的站點通過引入grapes實現(xiàn)在線拖拉拽編輯html

    Grapes插件是一種用于Web開發(fā)的開源工具,可以幫助用戶快速創(chuàng)建動態(tài)和交互式的網(wǎng)頁元素,它還支持多語言和多瀏覽器,適合開發(fā)響應(yīng)式網(wǎng)頁和移動應(yīng)用程序,這篇文章主要介紹了react搭建在線編輯html的站點通過引入grapes實現(xiàn)在線拖拉拽編輯html,需要的朋友可以參考下
    2023-08-08
  • 解決React報錯Style prop value must be an object

    解決React報錯Style prop value must be a

    這篇文章主要為大家介紹了React報錯Style prop value must be an object解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-12-12
  • 詳解React項目如何修改打包地址(編譯輸出文件地址)

    詳解React項目如何修改打包地址(編譯輸出文件地址)

    這篇文章主要介紹了詳解React項目如何修改打包地址(編譯輸出文件地址),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-03-03
  • react中useRef的應(yīng)用使用詳解

    react中useRef的應(yīng)用使用詳解

    這篇文章主要介紹了react中useRef的應(yīng)用使用詳解的相關(guān)資料,需要的朋友可以參考下
    2023-05-05
  • react-three-fiber實現(xiàn)炫酷3D粒子效果首頁

    react-three-fiber實現(xiàn)炫酷3D粒子效果首頁

    這篇文章主要介紹了react-three-fiber實現(xiàn)3D粒子效果,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-08-08
  • 前端面試題必會之前端react面試題

    前端面試題必會之前端react面試題

    在前端面試過程中經(jīng)常會問到一些面試題,今天小編抽空給大家講解前端面試題之必會react面試題,需要的朋友可以參考下
    2023-03-03

最新評論