前言：每次上傳遇到大文件，上傳速度和上傳后接口響應(yīng)都比較慢，為了提高用戶(hù)體驗(yàn)，減少用戶(hù)的等待時(shí)間，緩解服務(wù)器的壓力。我們    對(duì)大文件進(jìn)行了分片上傳，下面的具體思路和完整代碼，有需要的小伙伴可以看看。

實(shí)現(xiàn)思路：

1. 文件 MD5 加密

MD5 是文件的唯一標(biāo)識(shí)，可以利用文件的 MD5 查詢(xún)文件的上傳狀態(tài)。

根據(jù)文件的內(nèi)容、文件名稱(chēng)、文件大小等信息，通過(guò) spark-md5[2] 生成文件的 MD5。

2. 文件分片

文件上傳優(yōu)化的核心就是文件分片，Blob 對(duì)象中的 slice 方法可以對(duì)文件進(jìn)行切割，F(xiàn)ile 對(duì)象是繼承 Blob 對(duì)象的，因此 File 對(duì)象也有 slice 方法?？醋约喉?xiàng)目需要設(shè)置分片大小，我們分片大小和后端約定是5MB。

3. 上傳分片

上傳所有的切片，將切片序號(hào)、切片文件、文件 MD5 傳給后臺(tái)。

后臺(tái)接收到上傳請(qǐng)求后，首先查看名稱(chēng)為文件MD5 的文件夾是否存在。

思路很簡(jiǎn)單，實(shí)現(xiàn)起來(lái)大家肯定各自有難度，下面的完整的代碼，結(jié)合不同項(xiàng)目可以參考一下：

import SparkMD5 from 'spark-md5'
import request from '@/api/request'

/**
 * 分片上傳
 * @param {Object} file- 文件內(nèi)容
 * @param {Object} option- 需要給后端的參數(shù)
 * @param {String} url-上傳給后臺(tái)的接口地址
 */

export const uploadByPieces = (file, option, url) => {

  return new Promise(async (resolve, reject) => {
    // 1. 讀取文件的md5
    let fileMD5
    let fileRederInstance = new FileReader()
    fileRederInstance.readAsBinaryString(file)
    fileRederInstance.addEventListener('load', (e) => {
      let fileBolb = e.target.result
      fileMD5 = SparkMD5.hashBinary(fileBolb)
      readChunkMD5(file, fileMD5, option)
    })

    // 2. 針對(duì)每個(gè)文件進(jìn)行chunk處理
    const readChunkMD5 = async (file, md5, option) => {
      const chunkSize = 5 * 1024 * 1024 // 5MB一片
      const chunkCount = Math.ceil(file.size / chunkSize) // 總片數(shù)
      for (var i = 0; i < chunkCount; i++) {
        const { chunk } = getChunkInfo(file, i, chunkSize)
        await uploadChunk({ chunk, currentChunk: i, chunkCount, md5 }, option)
      }
    }
    
    const getChunkInfo = (file, currentChunk, chunkSize) => {
      let start = currentChunk * chunkSize
      let end = Math.min(file.size, start + chunkSize)
      let chunk = file.slice(start, end)
      chunk = blobToFile(chunk, file.name)
      return { start, end, chunk }
    }
    
    // Blob 轉(zhuǎn) File
    const blobToFile = (blob, fileName) => {
      const file = new File([blob], fileName, { type: blob.type })
      return file
    }
    
    // 3. 上傳分片文件
    const uploadChunk = (chunkInfo, option) => {
      // 創(chuàng)建formData對(duì)象，下面是結(jié)合不同項(xiàng)目給后端傳入的對(duì)象。
      let formData = new FormData()
      if (Object.keys(option).length > 0) {
        for (let key in option) {
          formData.append(key, option[key])
        }
      }
      formData.append('file', chunkInfo.chunk)
      formData.append('md5', chunkInfo.md5)
      formData.append('chunk_index', chunkInfo.currentChunk)
      formData.append('chunk_total', chunkInfo.chunkCount)
      request
        .post(url, formData)
        .then((res) => {
          if (res.data.src) {
            resolve(res)
          } else if (res.status !== 200) {
            reject(res)
          }
        })
        .catch((e) => {
          reject(e)
        })
    }
  })
}