大規格文件的上傳優化

時間 2020-05-14

標籤規格文件上傳優化简体版

原文原文鏈接

在開發過程當中，收到這樣一個問題反饋，在網站上傳 100 MB 以上的文件常常失敗，重試也要等老半天，這就難爲須要上傳大規格文件的用戶了。那麼應該怎麼作才能快速上傳，就算失敗了再次發送也能從上次中斷的地方繼續上傳呢？下文爲你揭曉答案~前端

舒適提示：配合 Demo 源碼一塊兒閱讀效果更佳ios

總體思路

第一步是結合項目背景，調研比較優化的解決方案。文件上傳失敗是老生常談的問題，經常使用方案是將一個大文件切片成多個小文件，並行請求接口進行上傳，全部請求獲得響應後，在服務器端合併全部的分片文件。當分片上傳失敗，能夠在從新上傳時進行判斷，只上傳上次失敗的部分，減小用戶的等待時間，緩解服務器壓力。這就是分片上傳文件。git

大文件上傳

那麼如何實現大文件分片上傳呢？github

流程圖以下：web

分爲如下步驟實現：ajax

1. 文件 MD5 加密

MD5 是文件的惟一標識，能夠利用文件的 MD5 查詢文件的上傳狀態。npm

根據文件的修改時間、文件名稱、最後修改時間等信息，經過 spark-md5 生成文件的 MD5。須要注意的是，大規格文件須要分片讀取文件，將讀取的文件內容添加到 spark-md5 的 hash 計算中，直到文件讀取完畢，最後返回最終的 hash 碼到 callback 回調函數裏面。這裏能夠根據須要添加文件讀取的進度條。axios

實現方法以下：bash

// 修改時間+文件名稱+最後修改時間-->MD5
md5File (file) {
  return new Promise((resolve, reject) => {
    let blobSlice =
      File.prototype.slice ||
      File.prototype.mozSlice ||
      File.prototype.webkitSlice
    let chunkSize = file.size / 100
    let chunks = 100
    let currentChunk = 0
    let spark = new SparkMD5.ArrayBuffer()
    let fileReader = new FileReader()
    fileReader.onload = function (e) {
      console.log('read chunk nr', currentChunk + 1, 'of', chunks)
      spark.append(e.target.result) // Append array buffer
      currentChunk++
      if (currentChunk < chunks) {
        loadNext()
      } else {
        let cur = +new Date()
        console.log('finished loading')
        // alert(spark.end() + '---' + (cur - pre)); // Compute hash
        let result = spark.end()
        resolve(result)
      }
    }
    fileReader.onerror = function (err) {
      console.warn('oops, something went wrong.')
      reject(err)
    }
    function loadNext () {
      let start = currentChunk * chunkSize
      let end =
        start + chunkSize >= file.size ? file.size : start + chunkSize
      fileReader.readAsArrayBuffer(blobSlice.call(file, start, end))
    }
    loadNext()
  })
}
複製代碼

2. 查詢文件狀態

前端獲得文件的 MD5 後，從後臺查詢是否存在名稱爲 MD5 的文件夾，若是存在，列出文件夾下全部文件，獲得已上傳的切片列表，若是不存在，則已上傳的切片列表爲空。服務器

// 校驗文件的MD5
checkFileMD5 (file, fileName, fileMd5Value, onError) {
  const fileSize = file.size
  const { chunkSize, uploadProgress } = this
  this.chunks = Math.ceil(fileSize / chunkSize)
  return new Promise(async (resolve, reject) => {
    const params = {
      fileName: fileName,
      fileMd5Value: fileMd5Value,
    }
    const { ok, data } = await services.checkFile(params)
    if (ok) {
      this.hasUploaded = data.chunkList.length
      uploadProgress(file)
      resolve(data)
    } else {
      reject(ok)
      onError()
    }
  })
}
複製代碼

3. 文件分片

文件上傳優化的核心就是文件分片，Blob 對象中的 slice 方法能夠對文件進行切割，File 對象是繼承 Blob 對象的，所以 File 對象也有 slice 方法。

定義每個分片文件的大小變量爲 chunkSize，經過文件大小 FileSize 和分片大小 chunkSize 獲得分片數量 chunks，使用 for 循環和 file.slice() 方法對文件進行分片，序號爲 0 - n，和已上傳的切片列表作比對，獲得全部未上傳的分片，push 到請求列表 requestList。

async checkAndUploadChunk (file, fileMd5Value, chunkList) {
  let { chunks, upload } = this
  const requestList = []
  for (let i = 0; i < chunks; i++) {
    let exit = chunkList.indexOf(i + '') > -1
    // 若是已經存在, 則不用再上傳當前塊
    if (!exit) {
      requestList.push(upload(i, fileMd5Value, file))
    }
  }
  console.log({ requestList })
  const result =
    requestList.length > 0
      ? await Promise.all(requestList)
        .then(result => {
          console.log({ result })
          return result.every(i => i.ok)
        })
        .catch(err => {
          return err
        })
      : true
  console.log({ result })
  return result === true
}
複製代碼

4. 上傳分片

調用 Promise.all 併發上傳全部的切片，將切片序號、切片文件、文件 MD5 傳給後臺。

後臺接收到上傳請求後，首先查看名稱爲文件 MD5 的文件夾是否存在，不存在則建立文件夾，而後經過 fs-extra 的 rename 方法，將切片從臨時路徑移動切片文件夾中，結果以下：

當所有分片上傳成功，通知服務端進行合併，當有一個分片上傳失敗時，提示「上傳失敗」。在從新上傳時，經過文件 MD5 獲得文件的上傳狀態，當服務器已經有該 MD5 對應的切片時，表明該切片已經上傳過，無需再次上傳，當服務器找不到該 MD5 對應的切片時，表明該切片須要上傳，用戶只需上傳這部分切片，就能夠完整上傳整個文件，這就是文件的斷點續傳。

// 上傳chunk
upload (i, fileMd5Value, file) {
  const { uploadProgress, chunks } = this
  return new Promise((resolve, reject) => {
    let { chunkSize } = this
    // 構造一個表單，FormData是HTML5新增的
    let end =
      (i + 1) * chunkSize >= file.size ? file.size : (i + 1) * chunkSize
    let form = new FormData()
    form.append('data', file.slice(i * chunkSize, end)) // file對象的slice方法用於切出文件的一部分
    form.append('total', chunks) // 總片數
    form.append('index', i) // 當前是第幾片
    form.append('fileMd5Value', fileMd5Value)
    services
      .uploadLarge(form)
      .then(data => {
        if (data.ok) {
          this.hasUploaded++
          uploadProgress(file)
        }
        console.log({ data })
        resolve(data)
      })
      .catch(err => {
        reject(err)
      })
  })
}
複製代碼

5. 上傳進度

雖然分片批量上傳比大文件單次上傳會快不少，也仍是有一段加載時間，這時應該加上上傳進度的提示，實時顯示文件上傳進度。

原生 Javascript 的 XMLHttpRequest 有提供 progress 事件，這個事件會返回文件已上傳的大小和總大小。項目使用 axios 對 ajax 進行封裝，能夠在 config 中增長 onUploadProgress 方法，監聽文件上傳進度。

const config = {
  onUploadProgress: progressEvent => {
    var complete = (progressEvent.loaded / progressEvent.total * 100 | 0) + '%'
  }
}
services.uploadChunk(form, config)
複製代碼

6. 合併分片

上傳完全部文件分片後，前端主動通知服務端進行合併，服務端接受到這個請求時主動合併切片，經過文件 MD5 在服務器的文件上傳路徑中找到同名文件夾。從上文可知，文件分片是按照分片序號命名的，而分片上傳接口是異步的，沒法保證服務器接收到的切片是按照請求順序拼接。因此應該在合併文件夾裏的分片文件前，根據文件名進行排序，而後再經過 concat-files 合併分片文件，獲得用戶上傳的文件。至此大文件上傳就完成了。

Node 端代碼：

// 合併文件
exports.merge = {
  validate: {
    query: {
      fileName: Joi.string()
        .trim()
        .required()
        .description('文件名稱'),
      md5: Joi.string()
        .trim()
        .required()
        .description('文件md5'),
      size: Joi.string()
        .trim()
        .required()
        .description('文件大小'),
    },
  },
  permission: {
    roles: ['user'],
  },
  async handler (ctx) {
    const { fileName, md5, size } = ctx.request.query
    let { name, base: filename, ext } = path.parse(fileName)
    const newFileName = randomFilename(name, ext)
    await mergeFiles(path.join(uploadDir, md5), uploadDir, newFileName, size)
      .then(async () => {
        const file = {
          key: newFileName,
          name: filename,
          mime_type: mime.getType(`${uploadDir}/${newFileName}`),
          ext,
          path: `${uploadDir}/${newFileName}`,
          provider: 'oss',
          size,
          owner: ctx.state.user.id,
        }
        const key = encodeURIComponent(file.key)
          .replace(/%/g, '')
          .slice(-100)
        file.url = await uploadLocalFileToOss(file.path, key)
        file.url = getFileUrl(file)
        const f = await File.create(omit(file, 'path'))
        const files = []
        files.push(f)
        ctx.body = invokeMap(files, 'toJSON')
      })
      .catch(() => {
        throw Boom.badData('大文件分片合併失敗，請稍候重試~')
      })
  },
}
複製代碼