vue如何實現文件切片上傳

這篇文章主要介紹了vue如何實現文件切片上傳的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇vue如何實現文件切片上傳文章都會有所收獲，下面我們一起來看看吧。

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

流程簡說

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

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

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

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

只有這三種狀態，實現這個步驟的一個重要參數就是這個文件的唯一標識符，這個標識符，使用的就是這個文件的 MD5 標識碼。所以我們首先需要獲取這個文件的 MD5 唯一標識碼。

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

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

• chunk： 當前是第幾個分片，一般從 0 開始。

• chunkSize：分片的大小，一般是5M，即5242880字節。

• chunks：一共有多少分片。

• file：當前分片的文件流。

• md5：整個文件的 MD5 唯一標識碼，不是分片的哈。

• name：當前文件的名稱。

• size：當前分片大小（如果最后一塊不一定是 5M）。

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

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

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

獲取文件的 MD5 唯一標識碼

很多人說哈，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。

獲取文件名 name

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

分片文件大小 chunkSize

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

文件切片 chunkList 列表

            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)  // 把截取的每一片數據保存到數組
              }
            }

切片總數 chunks

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

let chunks = chunkList.length

切片大小  size

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

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

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

合并

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

關于“vue如何實現文件切片上傳”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“vue如何實現文件切片上傳”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。