大文件快速上傳的方案，相信你也有過了解，其實無非就是將 文件變小，也就是通過 壓縮文件資源 或者 文件資源分塊 后再上傳。
本文只介紹資源分塊上傳的方式，并且會通過 前端（vue3 + vite） 和 服務端（nodejs + koa2） 交互的方式，實現大文件分塊上傳的簡單功能。
梳理思路
問題 1：誰負責資源分塊？誰負責資源整合？
當然這個問題也很簡單，肯定是前端負責分塊，服務端負責整合。
問題 2：前端怎么對資源進行分塊？
首先是選擇上傳的文件資源，接著就可以得到對應的文件對象 File，而 File.prototype.slice 方法可以實現資源的分塊，當然也有人說是 Blob.prototype.slice 方法，因為 Blob.prototype.slice === File.prototype.slice。
問題 3：服務端怎么知道什么時候要整合資源？如何保證資源整合的有序性？
由于前端會將資源分塊，然后單獨發送請求，也就是說，原來 1 個文件對應 1 個上傳請求，現在可能會變成 1 個文件對應 n 個上傳請求，所以前端可以基于 Promise.all 將這多個接口整合，上傳完成在發送一個合并的請求，通知服務端進行合并。
合并時可通過 nodejs 中的讀寫流（readStream/writeStream），將所有切片的流通過管道（pipe）輸入最終文件的流中。
在發送請求資源時，前端會定好每個文件對應的序號，并將當前分塊、序號以及文件 hash 等信息一起發送給服務端，服務端在進行合并時，通過序號進行依次合并即可。
問題 4：如果某個分塊的上傳請求失敗了，怎么辦？
一旦服務端某個上傳請求失敗，會返回當前分塊失敗的信息，其中會包含文件名稱、文件 hash、分塊大小以及分塊序號等，前端拿到這些信息后可以進行重傳，同時考慮此時是否需要將 Promise.all 替換為 Promise.allSettled 更方便。
前端部分
創建項目
通過 pnpm create vite 創建項目，對應文件目錄如下.
請求模塊
src/request.js
該文件就是針對 axios 進行簡單的封裝，如下：
import axios from "axios";
const baseURL = 'http://localhost:3001';
export const uploadFile = (url, formData, onUploadProgress = () => { }) => {
return axios({
method: 'post',
url,
baseURL,
headers: {
'Content-Type': 'multipart/form-data'
},
data: formData,
onUploadProgress
});
}
export const mergeChunks = (url, data) => {
return axios({
method: 'post',
url,
baseURL,
headers: {
'Content-Type': 'application/json'
},
data
});
}文件資源分塊
根據 DefualtChunkSize = 5 * 1024 * 1024 ，即 5 MB ，來對文件進行資源分塊進行計算，通過 spark-md5[1] 根據文件內容計算出文件的 hash 值，方便做其他優化，比如：當 hash 值不變時，服務端沒有必要重復讀寫文件等。
// 獲取文件分塊
const getFileChunk = (file, chunkSize = DefualtChunkSize) => {
return new Promise((resovle) => {
let blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice,
chunks = Math.ceil(file.size / chunkSize),
currentChunk = 0,
spark = new SparkMD5.ArrayBuffer(),
fileReader = new FileReader();
fileReader.onload = function (e) {
console.log('read chunk nr', currentChunk + 1, 'of');
const chunk = e.target.result;
spark.append(chunk);
currentChunk++;
if (currentChunk < chunks) {
loadNext();
} else {
let fileHash = spark.end();
console.info('finished computed hash', fileHash);
resovle({ fileHash });
}
};
fileReader.onerror = function () {
console.warn('oops, something went wrong.');
};
function loadNext() {
let start = currentChunk * chunkSize,
end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize;
let chunk = blobSlice.call(file, start, end);
fileChunkList.value.push({ chunk, size: chunk.size, name: currFile.value.name });
fileReader.readAsArrayBuffer(chunk);
}
loadNext();
});
}發送上傳請求和合并請求
通過 Promise.all 方法整合所以分塊的上傳請求，在所有分塊資源上傳完畢后，在 then 中發送合并請求。
// 上傳請求
const uploadChunks = (fileHash) => {
const requests = fileChunkList.value.map((item, index) => {
const formData = new FormData();
formData.append(`${currFile.value.name}-${fileHash}-${index}`, item.chunk);
formData.append("filename", currFile.value.name);
formData.append("hash", `${fileHash}-${index}`);
formData.append("fileHash", fileHash);
return uploadFile('/upload', formData, onUploadProgress(item));
});
Promise.all(requests).then(() => {
mergeChunks('/mergeChunks', { size: DefualtChunkSize, filename: currFile.value.name });
});
}進度條數據
分塊進度數據利用 axios 中的 onUploadProgress 配置項獲取數據，通過使用computed 根據分塊進度數據的變化自動自動計算當前文件的總進度。
// 總進度條
const totalPercentage = computed(() => {
if (!fileChunkList.value.length) return 0;
const loaded = fileChunkList.value
.map(item => item.size * item.percentage)
.reduce((curr, next) => curr + next);
return parseInt((loaded / currFile.value.size).toFixed(2));
})
// 分塊進度條
const onUploadProgress = (item) => (e) => {
item.percentage = parseInt(String((e.loaded / e.total) * 100));
}服務端部分
搭建服務
使用 koa2 搭建簡單的服務，端口為 3001
使用 koa-body 處理接收前端傳遞
'Content-Type': 'multipart/form-data'類型的數據使用 koa-router 注冊服務端路由
使用 koa2-cors 處理跨域問題
目錄/文件劃分
server/server.js
該文件是服務端具體的代碼實現，用于處理接收和整合分塊資源。
server/resources
該目錄是用于存放單文件的多個分塊，以及最后分塊整合后的資源：
分塊資源未合并時，會在該目錄下以當前文件名創建一個目錄，用于存放這個該文件相關的所有分塊
分塊資源需合并時，會讀取這個文件對應的目錄下的所有分塊資源，然后將它們整合成原文件
分塊資源合并完成，會刪除這個對應的文件目錄，只保留合并后的原文件，生成的文件名比真實文件名多一個
_前綴，如原文件名 "測試文件.txt" 對應合并后的文件名 "_測試文件.txt"
接收分塊
使用 koa-body 中的 formidable 配置中的 onFileBegin 函數處理前端傳來的 FormData 中的文件資源，在前端處理對應分塊名時的格式為：filename-fileHash-index，所以這里直接將分塊名拆分即可獲得對應的信息。
// 上傳請求
router.post(
'/upload',
// 處理文件 form-data 數據
koaBody({
multipart: true,
formidable: {
uploadDir: outputPath,
onFileBegin: (name, file) => {
const [filename, fileHash, index] = name.split('-');
const dir = path.join(outputPath, filename);
// 保存當前 chunk 信息，發生錯誤時進行返回
currChunk = {
filename,
fileHash,
index
};
// 檢查文件夾是否存在如果不存在則新建文件夾
if (!fs.existsSync(dir)) {
fs.mkdirSync(dir);
}
// 覆蓋文件存放的完整路徑
file.path = `${dir}/${fileHash}-${index}`;
},
onError: (error) => {
app.status = 400;
app.body = { code: 400, msg: "上傳失敗", data: currChunk };
return;
},
},
}),
// 處理響應
async (ctx) => {
ctx.set("Content-Type", "application/json");
ctx.body = JSON.stringify({
code: 2000,
message: 'upload successfully！'
});
}
);整合分塊
通過文件名找到對應文件分塊目錄，使用 fs.readdirSync(chunkDir) 方法獲取對應目錄下所以分塊的命名，在通過 fs.createWriteStream/fs.createReadStream 創建可寫/可讀流，結合管道 pipe 將流整合在同一文件中，合并完成后通過 fs.rmdirSync(chunkDir) 刪除對應分塊目錄。
// 合并請求
router.post('/mergeChunks', async (ctx) => {
const { filename, size } = ctx.request.body;
// 合并 chunks
await mergeFileChunk(path.join(outputPath, '_' + filename), filename, size);
// 處理響應
ctx.set("Content-Type", "application/json");
ctx.body = JSON.stringify({
data: {
code: 2000,
filename,
size
},
message: 'merge chunks successful！'
});
});
// 通過管道處理流
const pipeStream = (path, writeStream) => {
return new Promise(resolve => {
const readStream = fs.createReadStream(path);
readStream.pipe(writeStream);
readStream.on("end", () => {
fs.unlinkSync(path);
resolve();
});
});
}
// 合并切片
const mergeFileChunk = async (filePath, filename, size) => {
const chunkDir = path.join(outputPath, filename);
const chunkPaths = fs.readdirSync(chunkDir);
if (!chunkPaths.length) return;
// 根據切片下標進行排序，否則直接讀取目錄的獲得的順序可能會錯亂
chunkPaths.sort((a, b) => a.split("-")[1] - b.split("-")[1]);
console.log("chunkPaths = ", chunkPaths);
await Promise.all(
chunkPaths.map((chunkPath, index) =>
pipeStream(
path.resolve(chunkDir, chunkPath),
// 指定位置創建可寫流
fs.createWriteStream(filePath, {
start: index * size,
end: (index + 1) * size
})
)
)
);
// 合并后刪除保存切片的目錄
fs.rmdirSync(chunkDir);
};前端 & 服務端 交互
前端分塊上傳
測試文件信息：
選擇文件類型為 19.8MB，而且上面設定默認分塊大小為 5MB ，于是應該要分成 4 個分塊，即 4 個請求。
服務端分塊接收
前端發送合并請求
服務端合并分塊
擴展 —— 斷點續傳 & 秒傳
有了上面的核心邏輯之后，要實現斷點續傳和秒傳的功能，只需要在取擴展即可，這里不再給出具體實現，只列出一些思路。
斷點續傳
斷點續傳其實就是讓請求可中斷，然后在接著上次中斷的位置繼續發送，此時要保存每個請求的實例對象，以便后期取消對應請求，并將取消的請求保存或者記錄原始分塊列表取消位置信息等，以便后期重新發起請求。
取消請求的幾種方式：
如果使用原生 XHR 可使用
(new XMLHttpRequest()).abort()取消請求如果使用 axios 可使用
new CancelToken(function (cancel) {})取消請求如果使用 fetch 可使用
(new AbortController()).abort()取消請求
秒傳
不要被這個名字給誤導了，其實所謂的秒傳就是不用傳，在正式發起上傳請求時，先發起一個檢查請求，這個請求會攜帶對應的文件 hash 給服務端，服務端負責查找是否存在一模一樣的文件 hash，如果存在此時直接復用這個文件資源即可，不需要前端在發起額外的上傳請求。
最后
前端分片上傳的內容單純從理論上來看其實還是容易理解的，但是實際自己去實現的時候還是會踩一些坑，比如服務端接收解析 formData 格式的數據時，沒法獲取文件的二進制數據等。
