在實際開發專案過程中有時候需要上傳比較大的文件，然後呢，上傳的時候相對來說就會慢一些，so，後台可能會要求前端進行文件切片上傳，很簡單哈，就是把比如說1個G的檔案流切割成若干個小的檔案流，然後分別請求介面傳遞這個小的檔案流。
實作檔案切片導入，首先我們使用elementUI 也好，原生的upload 標籤也好，取得到檔案file 檔案流，然後需要做的一件事情就是知道這個文件之前有沒有上傳過，我們需要向後台提交一個這個文件唯一的標識符，然後讓後端告訴我們這個問題後台有沒有，這時候，後端可能會返回我們三種狀態：
檔案沒有，需要全部上傳。
這個檔案存在了，前端不需要再上傳。
這個檔案上傳了一部分，需要繼續把沒有上傳的部分上傳。
只有這三種狀態，實作這個步驟的一個重要參數就是這個檔案的唯一標識符，這個標識符，使用的就是這個檔案的 MD5 標識碼。所以我們首先需要取得這個檔案的 MD5 唯一識別碼。 【相關推薦：vuejs影片教學、web前端開發】
#我們知道檔案需要上傳或是需要部分上傳的時候，我們就需要進行切片操作了。這個就很簡單了，例如檔案的二進位位元流一共1個G，然後一般是5M 切一片，所以說如果是1個G 的檔案需要切205 片，當然最後一片不一定是5M，然後我們走文件分片上傳的接口，發起文件分片導入的請求。
首先明確一點，就是我們把這205 個分片資料流提交完，後台是需要合併的，就是把我們分片提交的在這205 個文件流合成一個大的文件保存起來，這樣，後台合併完的文件就是我們最終要提交導入的文件，既然後端需要合併，我們又是一片一片上傳的，總得讓後端知道每一片是這個文件的哪一部分吧？所以說我們提交分片請求的時候一般需要傳遞這幾個參數：
這樣後端就知道怎麼去合併最後的檔案了。當然了具體的欄位需要後端去定義，然後我們就按照這個思路去對應的對接就可以了。
OK，等我們 205 個分片資料全部提交完成，需要再走一個接口，就是通知後端，好了，我前端分片都傳完了，你可以合併文件了。
然後後端合併完成，檔案匯入成功！
很多人說哈，MD5 不是加密嘛，其實這個想法在這裡不是很對哈，MD5 是加密不了文件的，只會產生一個唯一的編碼，這麼說呢，哎喲，就當是加密吧，但是別妄想提交一個MD5 編碼就當把加密的文件提交給後端了哈，首先這個就是一個字符串，不是加密的文件，第二，這個玩意並不能解密。我們這裡只是給文件產生一個唯一標識符，讓後端判斷伺服器之前有沒有存在過這個文件，如果唯一標識有的話，就說明之前上傳過，直接用之前的就可以了，就不用再次上傳了，畢竟如果文件修改了，這個MD5 識別碼是會變的。
怎麼取得檔案的 MD5 編碼很簡單哈，在vue裡面需要使用一個函式庫 spark-md5。
一句指令安裝
npm install --save spark-md5
然後我們可以寫一個方法來封裝一下。
建立一個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标识码，后台说需要提交，我们就需要把文件切片，从头提交或者是提交部分操作了，如果不需要的话直接走合并接口就可以了，走合并接口其实是告诉后台合并，我们要做的就是把其他除了文件相关的其他参数传递给后台罢了。
文件切片就是类似于字符串截取，这里是截取字节。获取需要的参数我们自己些就可以了。假设我们使用 elementUI 文件上传组件获取到了文件 file。
let fileName = file.name // 获取文件名
let chunkSize = 5 * 1024 * 1024 // 一般是 5M，具体多少看后端想要多少
let chunkList = [] // 创建一个数组用来存储每一片文件流数据
if (file.size < chunkSize) { // 如果文件大小小于5M就只有一片，不用切都
chunkList.push(file.raw.slice(0)) // 文件流从第一个字节直接截取到最后就可以了
} else { // 如果文件大小大于5M 就需要切片了
var start = 0, end = 0 // 创建两个变量 开始位置 结束位置
while (true) { // 循环
end += chunkSize // 结束为止 = 结束位置 + 每片大小
let blob = file.raw.slice(start, end) // 文件流从开始位置截取到结束位置
start += chunkSize // 截取完，开始位置后移
if (!blob.size) { // 如果截取不到了就退出
break;
}
chunkList.push(blob) // 把截取的每一片数据保存到数组
}
}我们上一步已经获取到每片文件流的数组了，所以说呢，直接获取就可以了。
let chunks = chunkList.length
我们是按照 5 M 切割的，所以说每片大小应该是 5 * 1024 * 1024 但是呢，不对，因为最后一片不一定就是正好的 5 M，所以说我们可直接 .size 获取一下大小。比如：
chunkList[0].size // 获取第1片大小
参数都找齐了，然后就走切片提交接口开始提交数据就可以了。
当我们把分片数据全部提交成功，后台返回说切片文件保存成功之后，我们就可以走最后一个接口，提交就可以了。
好了，就这样！完成！！！
以上是淺析vue怎麼實現檔案切片上傳的詳細內容。更多資訊請關注PHP中文網其他相關文章！
