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

溫馨提示：配合 Demo 原始碼一起閱讀效果更佳

整體思路

第一步是結合專案背景，調研比較優化的解決方案。
檔案上傳失敗是老生常談的問題，常用方案是將一個大檔案切片成多個小檔案，並行請求介面進行上傳，所有請求得到響應後，在伺服器端合併所有的分片檔案。當分片上傳失敗，可以在重新上傳時進行判斷，只上傳上次失敗的部分，減少使用者的等待時間，緩解伺服器壓力。這就是分片上傳檔案。

大檔案上傳

那麼如何實現大檔案分片上傳呢？

流程圖如下：

分為以下步驟實現：

1. 檔案 MD5 加密

MD5 是檔案的唯一標識，可以利用檔案的 MD5 查詢檔案的上傳狀態。

根據檔案的修改時間、檔名稱、最後修改時間等資訊，通過 spark-md5 生成檔案的 MD5。需要注意的是，大規格檔案需要分片讀取檔案，將讀取的檔案內容新增到 spark-md5 的 hash 計算中，直到檔案讀取完畢，最後返回最終的 hash 碼到 callback 回撥函式裡面。這裡可以根據需要新增檔案讀取的進度條。

實現方法如下：

// 修改時間+檔名稱+最後修改時間-->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,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,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,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('大檔案分片合併失敗，請稍候重試~')
  })
 },}

總結

本文講述了大規格檔案上傳優化的一些做法，總結為以下 4 點：

• ob.slice 將檔案切片，併發上傳多個切片，所有切片上傳後告知伺服器合併，實現大檔案分片上傳；
• 原生 XMLHttpRequest 的 onprogress 對切片上傳進度的監聽，實時獲取檔案上傳進度；
• spark-md5 根據檔案內容算出檔案 MD5，得到檔案唯一標識，與檔案上傳狀態繫結；
• 分片上傳前通過檔案 MD5 查詢已上傳切片列表，上傳時只上傳未上傳過的切片，實現斷點續傳。

參照 Demo 原始碼 可快速上手上述功能

到此這篇關於大規格檔案的上傳優化思路詳解的文章就介紹到這了,更多相關大檔案上傳優化內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！