您好,登錄后才能下訂單哦!
這篇文章主要介紹“vue文件切片上傳的項(xiàng)目怎么實(shí)現(xiàn)”,在日常操作中,相信很多人在vue文件切片上傳的項(xiàng)目怎么實(shí)現(xiàn)問(wèn)題上存在疑惑,小編查閱了各式資料,整理出簡(jiǎn)單好用的操作方法,希望對(duì)大家解答”vue文件切片上傳的項(xiàng)目怎么實(shí)現(xiàn)”的疑惑有所幫助!接下來(lái),請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧!
實(shí)現(xiàn)文件切片導(dǎo)入,首先我們使用 elementUI 也好,原生的 upload 標(biāo)簽也好,獲取到文件 file 文件流,然后需要做的一件事情就是 知道這個(gè)文件之前有沒(méi)有上傳過(guò),我們需要向后臺(tái)提交一個(gè)這個(gè)文件唯一的標(biāo)識(shí)符,然后讓后端告訴我們這個(gè)問(wèn)題后臺(tái)有沒(méi)有,這時(shí)候,后端可能返回我們?nèi)N狀態(tài):
文件沒(méi)有,需要全部上傳。
這個(gè)文件存在了,前端不需要再上傳。
這個(gè)文件上傳了一部分,需要繼續(xù)把沒(méi)有上傳的部分上傳。
只有這三種狀態(tài),實(shí)現(xiàn)這個(gè)步驟的一個(gè)重要參數(shù)就是這個(gè)文件的唯一標(biāo)識(shí)符,這個(gè)標(biāo)識(shí)符,使用的就是這個(gè)文件的 MD5 標(biāo)識(shí)碼。所以我們首先需要獲取這個(gè)文件的 MD5 唯一標(biāo)識(shí)碼。
我們知道文件需要上傳或者是需要部分上傳的時(shí)候,我們就需要進(jìn)行切片操作了。這個(gè)就很簡(jiǎn)單了,比如文件的二進(jìn)制字節(jié)流一共1個(gè)G,然后一般是 5M 切一片,所以說(shuō)如果是1個(gè)G 的文件需要切 205 片,當(dāng)然最后一片不一定是 5M,然后我們走文件分片上傳的接口,發(fā)起文件分片導(dǎo)入的請(qǐng)求。
首先明確一點(diǎn),就是我們把這 205 個(gè)分片數(shù)據(jù)流提交完,后臺(tái)是需要合并的,就是把我們分片提交的在這 205 個(gè)文件流合成一個(gè)大的文件保存起來(lái),這樣,后臺(tái)合并完的文件就是我們最終要提交導(dǎo)入的文件,既然后端需要合并,我們又是一片一片上傳的,總得讓后端知道每一片是這個(gè)文件的哪一部分吧?所以說(shuō)我們提交分片請(qǐng)求的時(shí)候一般需要傳遞這幾個(gè)參數(shù):
chunk: 當(dāng)前是第幾個(gè)分片,一般從 0 開(kāi)始。
chunkSize:分片的大小,一般是5M,即5242880字節(jié)。
chunks:一共有多少分片。
file:當(dāng)前分片的文件流。
md5:整個(gè)文件的 MD5 唯一標(biāo)識(shí)碼,不是分片的哈。
name:當(dāng)前文件的名稱。
size:當(dāng)前分片大?。ㄈ绻詈笠粔K不一定是 5M)。
這樣后端就知道怎么去合并最后的文件了。當(dāng)然了具體的字段需要后端去定義,然后我們按照這個(gè)思路去相應(yīng)的對(duì)接就可以了。
OK,等我們 205 個(gè)分片數(shù)據(jù)全部提交完成,需要再走一個(gè)接口,就是通知后端,好了,我前端分片都傳完了,你可以合并文件了。
然后后端合并完成,文件導(dǎo)入成功!
很多人說(shuō)哈,MD5 不是加密嘛,其實(shí)這個(gè)想法在這里不是很對(duì)哈,MD5 是加密不了文件的,只會(huì)生成一個(gè)唯一的編碼,這么說(shuō)呢,哎喲,就當(dāng)是加密吧,但是別妄想提交一個(gè) MD5 編碼就當(dāng)把加密的文件提交給后端了哈,首先這個(gè)就是一個(gè)字符串,不是加密的文件,第二,這個(gè)玩意并不能解密。我們這里只是給文件生成一個(gè)唯一標(biāo)識(shí)符,讓后端判斷服務(wù)器之前有沒(méi)有存在過(guò)這個(gè)文件,如果唯一標(biāo)識(shí)有的話,就說(shuō)明之前上傳過(guò),直接用之前的就可以了,就不用再次上傳了,畢竟如果文件修改了,這個(gè) MD5 標(biāo)識(shí)碼是會(huì)變的。
怎么獲取文件的 MD5 編碼很簡(jiǎn)單哈,在vue里面需要使用一個(gè)庫(kù) spark-md5。
一句命令安裝
npm install --save spark-md5
然后我們可以寫(xiě)一個(gè)方法來(lái)封裝一下。
創(chuàng)建一個(gè) fileMd5Sum.js 文件:
import SparkMD5 from 'spark-md5' export default { // md5值計(jì)算 fileMd5Sum(file) { return new Promise(resolve => { let fileReader = new FileReader() let Spark = new SparkMD5.ArrayBuffer() fileReader.readAsArrayBuffer(file) fileReader.onload = function (e) { Spark.append(e.target.result) let md5 = Spark.end() resolve(md5) } }); } }
然后在需要使用的時(shí)候就可以使用了,當(dāng)然這里返回的是一個(gè) Promise,直接 .then
就可以獲取了。
或者是使用 async、 await
。
let md5Str = await this.fileMd5Sum.fileMd5Sum(file.raw)
獲取了文件MD5標(biāo)識(shí)碼,后臺(tái)說(shuō)需要提交,我們就需要把文件切片,從頭提交或者是提交部分操作了,如果不需要的話直接走合并接口就可以了,走合并接口其實(shí)是告訴后臺(tái)合并,我們要做的就是把其他除了文件相關(guān)的其他參數(shù)傳遞給后臺(tái)罷了。
文件切片就是類似于字符串截取,這里是截取字節(jié)。獲取需要的參數(shù)我們自己些就可以了。假設(shè)我們使用 elementUI 文件上傳組件獲取到了文件 file
。
let fileName = file.name // 獲取文件名
let chunkSize = 5 * 1024 * 1024 // 一般是 5M,具體多少看后端想要多少
let chunkList = [] // 創(chuàng)建一個(gè)數(shù)組用來(lái)存儲(chǔ)每一片文件流數(shù)據(jù) if (file.size < chunkSize) { // 如果文件大小小于5M就只有一片,不用切都 chunkList.push(file.raw.slice(0)) // 文件流從第一個(gè)字節(jié)直接截取到最后就可以了 } else { // 如果文件大小大于5M 就需要切片了 var start = 0, end = 0 // 創(chuàng)建兩個(gè)變量 開(kāi)始位置 結(jié)束位置 while (true) { // 循環(huán) end += chunkSize // 結(jié)束為止 = 結(jié)束位置 + 每片大小 let blob = file.raw.slice(start, end) // 文件流從開(kāi)始位置截取到結(jié)束位置 start += chunkSize // 截取完,開(kāi)始位置后移 if (!blob.size) { // 如果截取不到了就退出 break; } chunkList.push(blob) // 把截取的每一片數(shù)據(jù)保存到數(shù)組 } }
我們上一步已經(jīng)獲取到每片文件流的數(shù)組了,所以說(shuō)呢,直接獲取就可以了。
let chunks = chunkList.length
我們是按照 5 M 切割的,所以說(shuō)每片大小應(yīng)該是 5 * 1024 * 1024
但是呢,不對(duì),因?yàn)樽詈笠黄灰欢ň褪钦玫?5 M,所以說(shuō)我們可直接 .size
獲取一下大小。比如:
chunkList[0].size // 獲取第1片大小
參數(shù)都找齊了,然后就走切片提交接口開(kāi)始提交數(shù)據(jù)就可以了。
到此,關(guān)于“vue文件切片上傳的項(xiàng)目怎么實(shí)現(xiàn)”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí),請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站,小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。