大檔案分片上傳
整體思路
第一步是結合專案背景,調研比較優化的解決方案。 檔案上傳失敗是老生常談的問題,常用方案是將一個大檔案切片成多個小檔案,並行請求介面進行上傳,所有請求得到響應後,在伺服器端合併所有的分片檔案。當分片上傳失敗,可以在重新上傳時進行判斷,只上傳上次失敗的部分,減少使用者的等待時間,緩解伺服器壓力。這就是分片上傳檔案。
大檔案上傳
那麼如何實現大檔案分片上傳呢?
流程圖如下:
分為以下步驟實現:
1. 檔案 MD5 加密
MD5 是檔案的唯一標識,可以利用檔案的 MD5 查詢檔案的上傳狀態。
根據檔案的修改時間、檔名稱、最後修改時間等資訊,通過 spark-md5 生成檔案的 MD5。需要注意的是,大規格檔案需要分片讀取檔案,將讀取的檔案內容新增到
實現方法如下:
// 修改時間+檔名稱+最後修改時間-->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('大檔案分片合併失敗,請稍候重試~')
})
},
}
總結
本文講述了大規格檔案上傳優化的一些做法,總結為以下 4 點:
- Blob.slice 將檔案切片,併發上傳多個切片,所有切片上傳後告知伺服器合併,實現大檔案分片上傳;
- 原生 XMLHttpRequest 的 onprogress 對切片上傳進度的監聽,實時獲取檔案上傳進度;
- spark-md5 根據檔案內容算出檔案 MD5,得到檔案唯一標識,與檔案上傳狀態繫結;
- 分片上傳前通過檔案 MD5 查詢已上傳切片列表,上傳時只上傳未上傳過的切片,實現斷點續傳。