?? ?? ???? ???? ????? ? ??? ????? ?? ??? ???, ??? ??? ??? ????? ????? ??????? ?? ??? ?????? ?????? ??? ? ????. ?? ?????. ?, ?? ?? 1G ?? ???? ?? ?? ?? ?? ????? ?? ?? ?? ?? ???? ?? ????? ?????? ?????.

Process Brief

?? ?? ????? ????? ?? elementUI ?? ?? ??? ??? ???? ?? ?? ???? ????. ?? ?? ? ??? ??? ??????? ???? ???. ? ??? ?? ?? ???? ???? ??? ?? ???? ??? ??? ??? ????? ?? ???. ?? ???? ? ?? ??? ??? ? ????.

• ??? ??? ? ????. , ?? ??? ????? ???.

• ? ??? ?? ????? ??? ???? ?? ???? ??? ????.

• ? ??? ??? ??? ????, ????? ?? ??? ???? ??? ??? ???.

? ??? ???? ??? ?? ??? ??? MD5 ?? ??? ???? ????. ??? ?? ? ??? MD5 ?? ?? ??? ???? ???. [?? ????: vuejs ??? ????, ? ????? ??]

??? ??? ????? ??? ????? ????? ? ? ???? ??? ???? ??? ?? ?? ????. ?? ?? ??? ???? ??? ???? ? 1G?? ????? 5M? ? ???? ????? 1G ??? ?? 205?? ???? ???? ???. ?? ??? ??? ??? 5M? ??? ????. ?? ?? ??? ????? ????? ?? ?????? ???? ??? ????? ???? ?? ??? ?????.

??, 205?? ??? ??? ???? ??? ? ??????? ?? ???? ??? ?? ??? ????. ?, ???? ??? 205?? ?? ???? ? ??? ???? ???? ???. ??? ?? ????? ??? ??? ??? ?? ????? ?? ???? ???. ???? ???? ?? ?? ??? ?????? ? ??? ??? ?? ???? ???? ??? ???. , ???? ??? ?? ??? ??? ? ????? ?? ????? ???? ???.

• chunk: ?? ?? ??, ????? 0?? ?????.
• chunkSize: ??? ??, ????? 5M, 5242880??????.
• chunks: ? ?? ????.
• file: ?? ??? ?? ??????.
• md5: ????? ?? ?? ??? MD5 ?? ?? ?????.
• name: ?? ??? ?????.
• size: ?? ?? ??(??? ??? ??? 5M? ?? ??).

??? ?? ???? ?? ??? ???? ??? ? ? ????. ?? ????? ?? ??? ???? ??, ?? ?? ? ????? ?? ???? ??? ? ????.

?????. 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)
      }
    });
  }
}

??? ??? ? ??? ? ????. ?? ??? ???? ?? .then?? ?? ?? ? ?? Promise???. .then 就可以獲取了。

或者是使用 async、 await

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

文件切片

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

文件切片就是類似于字符串截取，這里是截取字節(jié)。獲取需要的參數(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)建兩個變量 開始位置 結束位置
              while (true) {  // 循環(huán)
                end += chunkSize  // 結束為止 = 結束位置 + 每片大小
                let blob = file.raw.slice(start, end)  // 文件流從開始位置截取到結束位置
                start += chunkSize  // 截取完，開始位置后移
                if (!blob.size) {  // 如果截取不到了就退出
                  break;
                }
                chunkList.push(blob)  // 把截取的每一片數(shù)據(jù)保存到數(shù)組
              }
            }

切片總數(shù) chunks

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

let chunks = chunkList.length

切片大小 size

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

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

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

合并

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

好了，就這樣！完成！?。?/p>

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

? ??? vue? ?? ?? ???? ???? ??? ?? ??? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!