淺析vue怎麼實現檔案切片上傳

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

流程簡說

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

• 檔案沒有，需要全部上傳。

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

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

只有這三種狀態，實作這個步驟的一個重要參數就是這個檔案的唯一標識符，這個標識符，使用的就是這個檔案的 MD5 標識碼。所以我們首先需要取得這個檔案的 MD5 唯一識別碼。 【相關推薦：vuejs影片教學、web前端開發】

#我們知道檔案需要上傳或是需要部分上傳的時候，我們就需要進行切片操作了。這個就很簡單了，例如檔案的二進位位元流一共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片大小

参数都找齐了，然后就走切片提交接口开始提交数据就可以了。

合并

当我们把分片数据全部提交成功，后台返回说切片文件保存成功之后，我们就可以走最后一个接口，提交就可以了。

好了，就这样！完成！！！

（学习视频分享：vuejs入门教程、编程基础视频）

以上是淺析vue怎麼實現檔案切片上傳的詳細內容。更多資訊請關注PHP中文網其他相關文章！