vue如何實(shí)現(xiàn)文件切片上傳
這篇文章主要介紹了vue如何實(shí)現(xiàn)文件切片上傳的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇vue如何實(shí)現(xiàn)文件切片上傳文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。
成都創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括東洲網(wǎng)站建設(shè)、東洲網(wǎng)站制作、東洲網(wǎng)頁(yè)制作以及東洲網(wǎng)絡(luò)營(yíng)銷策劃等。多年來(lái)，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，東洲網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到東洲省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！
在實(shí)際開(kāi)發(fā)項(xiàng)目過(guò)程中有時(shí)候需要上傳比較大的文件，然后呢，上傳的時(shí)候相對(duì)來(lái)說(shuō)就會(huì)慢一些，so，后臺(tái)可能會(huì)要求前端進(jìn)行文件切片上傳，很簡(jiǎn)單哈，就是把比如說(shuō)1個(gè)G的文件流切割成若干個(gè)小的文件流，然后分別請(qǐng)求接口傳遞這個(gè)小的文件流。
流程簡(jiǎn)說(shuō)
實(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)入成功！
獲取文件的 MD5 唯一標(biāo)識(shí)碼
很多人說(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。
獲取文件名 name
let fileName = file.name // 獲取文件名
分片文件大小 chunkSize
let chunkSize = 5 * 1024 * 1024 // 一般是 5M，具體多少看后端想要多少
文件切片 chunkList 列表
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ù)組
}
}
切片總數(shù) chunks
我們上一步已經(jīng)獲取到每片文件流的數(shù)組了，所以說(shuō)呢，直接獲取就可以了。
let chunks = chunkList.length
切片大小 size
我們是按照 5 M 切割的，所以說(shuō)每片大小應(yīng)該是 5 * 1024 * 1024 但是呢，不對(duì)，因?yàn)樽詈笠黄灰欢ň褪钦玫?5 M，所以說(shuō)我們可直接 .size 獲取一下大小。比如：
chunkList[0].size // 獲取第1片大小
參數(shù)都找齊了，然后就走切片提交接口開(kāi)始提交數(shù)據(jù)就可以了。
合并
當(dāng)我們把分片數(shù)據(jù)全部提交成功，后臺(tái)返回說(shuō)切片文件保存成功之后，我們就可以走最后一個(gè)接口，提交就可以了。
關(guān)于“vue如何實(shí)現(xiàn)文件切片上傳”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“vue如何實(shí)現(xiàn)文件切片上傳”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
網(wǎng)站名稱：vue如何實(shí)現(xiàn)文件切片上傳
標(biāo)題路徑：http://jinyejixie.com/article44/ijjhhe.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、響應(yīng)式網(wǎng)站、品牌網(wǎng)站設(shè)計(jì)、營(yíng)銷型網(wǎng)站建設(shè)、外貿(mào)建站、網(wǎng)站排名
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
