在實際開發(fā)項目過程中有時候需要上傳比較大的文件，然后呢，上傳的時候相對來說就會慢一些，so，后臺可能會要求前端進行文件切片上傳，很簡單哈，就是把比如說1個G的文件流切割成若干個小的文件流，然后分別請求接口傳遞這個小的文件流。

流程簡說

實現(xiàn)文件切片導入，首先我們使用 elementUI 也好，原生的 upload 標簽也好，獲取到文件 file 文件流，然后需要做的一件事情就是 知道這個文件之前有沒有上傳過，我們需要向后臺提交一個這個文件唯一的標識符，然后讓后端告訴我們這個問題后臺有沒有，這時候，后端可能返回我們?nèi)N狀態(tài)：

【資料圖】

文件沒有，需要全部上傳。

這個文件存在了，前端不需要再上傳。

這個文件上傳了一部分，需要繼續(xù)把沒有上傳的部分上傳。

只有這三種狀態(tài)，實現(xiàn)這個步驟的一個重要參數(shù)就是這個文件的唯一標識符，這個標識符，使用的就是這個文件的 MD5 標識碼。所以我們首先需要獲取這個文件的 MD5 唯一標識碼?！鞠嚓P(guān)推薦：vuejs視頻教程、web前端開發(fā)】

我們知道文件需要上傳或者是需要部分上傳的時候，我們就需要進行切片操作了。這個就很簡單了，比如文件的二進制字節(jié)流一共1個G，然后一般是 5M 切一片，所以說如果是1個G 的文件需要切 205 片，當然最后一片不一定是 5M，然后我們走文件分片上傳的接口，發(fā)起文件分片導入的請求。

首先明確一點，就是我們把這 205 個分片數(shù)據(jù)流提交完，后臺是需要合并的，就是把我們分片提交的在這 205 個文件流合成一個大的文件保存起來，這樣，后臺合并完的文件就是我們最終要提交導入的文件，既然后端需要合并，我們又是一片一片上傳的，總得讓后端知道每一片是這個文件的哪一部分吧？所以說我們提交分片請求的時候一般需要傳遞這幾個參數(shù)：

這樣后端就知道怎么去合并最后的文件了。當然了具體的字段需要后端去定義，然后我們按照這個思路去相應(yīng)的對接就可以了。

OK，等我們 205 個分片數(shù)據(jù)全部提交完成，需要再走一個接口，就是通知后端，好了，我前端分片都傳完了，你可以合并文件了。

然后后端合并完成，文件導入成功！

獲取文件的 MD5 唯一標識碼

很多人說哈，MD5 不是加密嘛，其實這個想法在這里不是很對哈，MD5 是加密不了文件的，只會生成一個唯一的編碼，這么說呢，哎喲，就當是加密吧，但是別妄想提交一個 MD5 編碼就當把加密的文件提交給后端了哈，首先這個就是一個字符串，不是加密的文件，第二，這個玩意并不能解密。我們這里只是給文件生成一個唯一標識符，讓后端判斷服務(wù)器之前有沒有存在過這個文件，如果唯一標識有的話，就說明之前上傳過，直接用之前的就可以了，就不用再次上傳了，畢竟如果文件修改了，這個 MD5 標識碼是會變的。

怎么獲取文件的 MD5 編碼很簡單哈，在vue里面需要使用一個庫 spark-md5。

一句命令安裝

npm install --save spark-md5

然后我們可以寫一個方法來封裝一下。

創(chuàng)建一個 fileMd5Sum.js 文件：

import SparkMD5 from "spark-md5"export default {  // md5值計算  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)      }    });  }}

然后在需要使用的時候就可以使用了，當然這里返回的是一個 Promise，直接 .then就可以獲取了。

或者是使用 async、 await。

let md5Str = await this.fileMd5Sum.fileMd5Sum(file.raw)

文件切片

獲取了文件MD5標識碼，后臺說需要提交，我們就需要把文件切片，從頭提交或者是提交部分操作了，如果不需要的話直接走合并接口就可以了，走合并接口其實是告訴后臺合并，我們要做的就是把其他除了文件相關(guān)的其他參數(shù)傳遞給后臺罷了。

文件切片就是類似于字符串截取，這里是截取字節(jié)。獲取需要的參數(shù)我們自己些就可以了。假設(shè)我們使用 elementUI 文件上傳組件獲取到了文件 file。

獲取文件名 name

let fileName = file.name  // 獲取文件名

分片文件大小 chunkSize

let chunkSize = 5 * 1024 * 1024   // 一般是 5M，具體多少看后端想要多少

文件切片 chunkList 列表

let chunkList = []  // 創(chuàng)建一個數(shù)組用來存儲每一片文件流數(shù)據(jù)            if (file.size < chunkSize) {  // 如果文件大小小于5M就只有一片，不用切都              chunkList.push(file.raw.slice(0))  // 文件流從第一個字節(jié)直接截取到最后就可以了            } else {  // 如果文件大小大于5M 就需要切片了              var start = 0, end = 0  // 創(chuàng)建兩個變量 開始位置 結(jié)束位置              while (true) {  // 循環(huán)                end += chunkSize  // 結(jié)束為止 = 結(jié)束位置 + 每片大小                let blob = file.raw.slice(start, end)  // 文件流從開始位置截取到結(jié)束位置                start += chunkSize  // 截取完，開始位置后移                if (!blob.size) {  // 如果截取不到了就退出                  break;                }                chunkList.push(blob)  // 把截取的每一片數(shù)據(jù)保存到數(shù)組              }            }

切片總數(shù) chunks

我們上一步已經(jīng)獲取到每片文件流的數(shù)組了，所以說呢，直接獲取就可以了。

let chunks = chunkList.length

切片大小 size

我們是按照 5 M 切割的，所以說每片大小應(yīng)該是 5 * 1024 * 1024但是呢，不對，因為最后一片不一定就是正好的 5 M，所以說我們可直接 .size獲取一下大小。比如：

chunkList[0].size  // 獲取第1片大小

參數(shù)都找齊了，然后就走切片提交接口開始提交數(shù)據(jù)就可以了。

合并

當我們把分片數(shù)據(jù)全部提交成功，后臺返回說切片文件保存成功之后，我們就可以走最后一個接口，提交就可以了。

好了，就這樣！完成?。?！

（學習視頻分享：vuejs入門教程、編程基礎(chǔ)視頻）

以上就是淺析vue怎么實現(xiàn)文件切片上傳的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！

關(guān)鍵詞：