建站
咨詢
售后
建站咨詢
新聞中心
前言
大文件快速上傳的方案，相信你也有過了解，其實(shí)無非就是將 文件變小，也就是通過 壓縮文件資源 或者 文件資源分塊 后再上傳。
創(chuàng)新互聯(lián)致力于互聯(lián)網(wǎng)品牌建設(shè)與網(wǎng)絡(luò)營銷，包括成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、SEO優(yōu)化、網(wǎng)絡(luò)推廣、整站優(yōu)化營銷策劃推廣、電子商務(wù)、移動(dòng)互聯(lián)網(wǎng)營銷等。創(chuàng)新互聯(lián)為不同類型的客戶提供良好的互聯(lián)網(wǎng)應(yīng)用定制及解決方案，創(chuàng)新互聯(lián)核心團(tuán)隊(duì)10多年專注互聯(lián)網(wǎng)開發(fā)，積累了豐富的網(wǎng)站經(jīng)驗(yàn)，為廣大企業(yè)客戶提供一站式企業(yè)網(wǎng)站建設(shè)服務(wù)，在網(wǎng)站建設(shè)行業(yè)內(nèi)樹立了良好口碑。
本文只介紹資源分塊上傳的方式，并且會(huì)通過 前端（vue3 + vite） 和 服務(wù)端（nodejs + koa2） 交互的方式，實(shí)現(xiàn)大文件分塊上傳的簡單功能。
梳理思路
問題 1：誰負(fù)責(zé)資源分塊？誰負(fù)責(zé)資源整合？
當(dāng)然這個(gè)問題也很簡單，肯定是前端負(fù)責(zé)分塊，服務(wù)端負(fù)責(zé)整合.
問題 2：前端怎么對(duì)資源進(jìn)行分塊？
首先是選擇上傳的文件資源，接著就可以得到對(duì)應(yīng)的文件對(duì)象 File，而 File.prototype.slice 方法可以實(shí)現(xiàn)資源的分塊，當(dāng)然也有人說是 Blob.prototype.slice 方法，因?yàn)?Blob.prototype.slice === File.prototype.slice.
問題 3：服務(wù)端怎么知道什么時(shí)候要整合資源？如何保證資源整合的有序性？
由于前端會(huì)將資源分塊，然后單獨(dú)發(fā)送請(qǐng)求，也就是說，原來 1 個(gè)文件對(duì)應(yīng) 1 個(gè)上傳請(qǐng)求，現(xiàn)在可能會(huì)變成 1 個(gè)文件對(duì)應(yīng) n 個(gè)上傳請(qǐng)求，所以前端可以基于 Promise.all 將這多個(gè)接口整合，上傳完成在發(fā)送一個(gè)合并的請(qǐng)求，通知服務(wù)端進(jìn)行合并。
合并時(shí)可通過 nodejs 中的讀寫流（readStream/writeStream），將所有切片的流通過管道（pipe）輸入最終文件的流中。
在發(fā)送請(qǐng)求資源時(shí)，前端會(huì)定好每個(gè)文件對(duì)應(yīng)的序號(hào)，并將當(dāng)前分塊、序號(hào)以及文件 hash 等信息一起發(fā)送給服務(wù)端，服務(wù)端在進(jìn)行合并時(shí)，通過序號(hào)進(jìn)行依次合并即可。
問題 4：如果某個(gè)分塊的上傳請(qǐng)求失敗了，怎么辦？
一旦服務(wù)端某個(gè)上傳請(qǐng)求失敗，會(huì)返回當(dāng)前分塊失敗的信息，其中會(huì)包含文件名稱、文件 hash、分塊大小以及分塊序號(hào)等，前端拿到這些信息后可以進(jìn)行重傳，同時(shí)考慮此時(shí)是否需要將 Promise.all 替換為 Promise.allSettled 更方便。
前端部分
創(chuàng)建項(xiàng)目
通過 pnpm create vite 創(chuàng)建項(xiàng)目，對(duì)應(yīng)文件目錄如下：
請(qǐng)求模塊
src/request.js該文件就是針對(duì) axios 進(jìn)行簡單的封裝，如下：
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
});
}
文件資源分塊
根據(jù) DefualtChunkSize = 5 * 1024 * 1024 ，即 5 MB ，來對(duì)文件進(jìn)行資源分塊進(jìn)行計(jì)算，通過 spark-md5[1] 根據(jù)文件內(nèi)容計(jì)算出文件的 hash 值，方便做其他優(yōu)化，比如：當(dāng) hash 值不變時(shí)，服務(wù)端沒有必要重復(fù)讀寫文件等。
// 獲取文件分塊
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();
});
}
發(fā)送上傳請(qǐng)求和合并請(qǐng)求
通過 Promise.all 方法整合所以分塊的上傳請(qǐng)求，在所有分塊資源上傳完畢后，在 then 中發(fā)送合并請(qǐng)求。
// 上傳請(qǐng)求
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 });
});
}
進(jìn)度條數(shù)據(jù)
分塊進(jìn)度數(shù)據(jù)利用 axios 中的 onUploadProgress 配置項(xiàng)獲取數(shù)據(jù)，通過使用computed 根據(jù)分塊進(jìn)度數(shù)據(jù)的變化自動(dòng)自動(dòng)計(jì)算當(dāng)前文件的總進(jìn)度。
// 總進(jìn)度條
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));
})
// 分塊進(jìn)度條
const onUploadProgress = (item) => (e) => {
item.percentage = parseInt(String((e.loaded / e.total) * 100));
}
服務(wù)端部分
搭建服務(wù)
- 使用 koa2 搭建簡單的服務(wù)，端口為 3001
- 使用 koa-body 處理接收前端傳遞 'Content-Type': 'multipart/form-data' 類型的數(shù)據(jù)
- 使用 koa-router 注冊(cè)服務(wù)端路由
- 使用 koa2-cors 處理跨域問題
目錄/文件劃分
server/server.js
該文件是服務(wù)端具體的代碼實(shí)現(xiàn)，用于處理接收和整合分塊資源。
server/resources
該目錄是用于存放單文件的多個(gè)分塊，以及最后分塊整合后的資源：
- 分塊資源未合并時(shí)，會(huì)在該目錄下以當(dāng)前文件名創(chuàng)建一個(gè)目錄，用于存放這個(gè)該文件相關(guān)的所有分塊
- 分塊資源需合并時(shí)，會(huì)讀取這個(gè)文件對(duì)應(yīng)的目錄下的所有分塊資源，然后將它們整合成原文件
- 分塊資源合并完成，會(huì)刪除這個(gè)對(duì)應(yīng)的文件目錄，只保留合并后的原文件，生成的文件名比真實(shí)文件名多一個(gè) _ 前綴，如原文件名 "測試文件.txt" 對(duì)應(yīng)合并后的文件名 "_測試文件.txt"
接收分塊
使用 koa-body 中的 formidable 配置中的 onFileBegin 函數(shù)處理前端傳來的 FormData 中的文件資源，在前端處理對(duì)應(yīng)分塊名時(shí)的格式為：filename-fileHash-index，所以這里直接將分塊名拆分即可獲得對(duì)應(yīng)的信息。
// 上傳請(qǐng)求
router.post(
'/upload',
// 處理文件 form-data 數(shù)據(jù)
koaBody({
multipart: true,
formidable: {
uploadDir: outputPath,
onFileBegin: (name, file) => {
const [filename, fileHash, index] = name.split('-');
const dir = path.join(outputPath, filename);
// 保存當(dāng)前 chunk 信息，發(fā)生錯(cuò)誤時(shí)進(jìn)行返回
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;
},
},
}),
// 處理響應(yīng)
async (ctx) => {
ctx.set("Content-Type", "application/json");
ctx.body = JSON.stringify({
code: 2000,
message: 'upload successfully！'
});
});
整合分塊
通過文件名找到對(duì)應(yīng)文件分塊目錄，使用 fs.readdirSync(chunkDir) 方法獲取對(duì)應(yīng)目錄下所以分塊的命名，在通過 fs.createWriteStream/fs.createReadStream 創(chuàng)建可寫/可讀流，結(jié)合管道 pipe 將流整合在同一文件中，合并完成后通過 fs.rmdirSync(chunkDir) 刪除對(duì)應(yīng)分塊目錄。
// 合并請(qǐng)求
router.post('/mergeChunks', async (ctx) => {
const { filename, size } = ctx.request.body;
// 合并 chunks
await mergeFileChunk(path.join(outputPath, '_' + filename), filename, size);
// 處理響應(yīng)
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;
// 根據(jù)切片下標(biāo)進(jìn)行排序，否則直接讀取目錄的獲得的順序可能會(huì)錯(cuò)亂
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),
// 指定位置創(chuàng)建可寫流
fs.createWriteStream(filePath, {
start: index * size,
end: (index + 1) * size
})
)
)
);
// 合并后刪除保存切片的目錄
fs.rmdirSync(chunkDir);
};
前端 & 服務(wù)端 交互
前端分塊上傳
測試文件信息：
選擇文件類型為 19.8MB，而且上面設(shè)定默認(rèn)分塊大小為 5MB ，于是應(yīng)該要分成 4 個(gè)分塊，即 4 個(gè)請(qǐng)求。
服務(wù)端分塊接收
前端發(fā)送合并請(qǐng)求
服務(wù)端合并分塊
擴(kuò)展 —— 斷點(diǎn)續(xù)傳 & 秒傳
有了上面的核心邏輯之后，要實(shí)現(xiàn)斷點(diǎn)續(xù)傳和秒傳的功能，只需要在取擴(kuò)展即可，這里不再給出具體實(shí)現(xiàn)，只列出一些思路。
斷點(diǎn)續(xù)傳
斷點(diǎn)續(xù)傳其實(shí)就是讓請(qǐng)求可中斷，然后在接著上次中斷的位置繼續(xù)發(fā)送，此時(shí)要保存每個(gè)請(qǐng)求的實(shí)例對(duì)象，以便后期取消對(duì)應(yīng)請(qǐng)求，并將取消的請(qǐng)求保存或者記錄原始分塊列表取消位置信息等，以便后期重新發(fā)起請(qǐng)求。
取消請(qǐng)求的幾種方式
- 如果使用原生 XHR 可使用 (new XMLHttpRequest()).abort() 取消請(qǐng)求
- 如果使用 axios 可使用 new CancelToken(function (cancel) {}) 取消請(qǐng)求
- 如果使用 fetch 可使用 (new AbortController()).abort() 取消請(qǐng)求
秒傳
不要被這個(gè)名字給誤導(dǎo)了，其實(shí)所謂的秒傳就是不用傳，在正式發(fā)起上傳請(qǐng)求時(shí)，先發(fā)起一個(gè)檢查請(qǐng)求，這個(gè)請(qǐng)求會(huì)攜帶對(duì)應(yīng)的文件 hash 給服務(wù)端，服務(wù)端負(fù)責(zé)查找是否存在一模一樣的文件 hash，如果存在此時(shí)直接復(fù)用這個(gè)文件資源即可，不需要前端在發(fā)起額外的上傳請(qǐng)求。
最后
前端分片上傳的內(nèi)容單純從理論上來看其實(shí)還是容易理解的，但是實(shí)際自己去實(shí)現(xiàn)的時(shí)候還是會(huì)踩一些坑，比如服務(wù)端接收解析 formData 格式的數(shù)據(jù)時(shí)，沒法獲取文件的二進(jìn)制數(shù)據(jù)等。
當(dāng)前名稱：大文件怎樣實(shí)現(xiàn)快速上傳？
文章位置：http://www.dlmjj.cn/article/dhgjcdj.html
