溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“Node.js實現斷點續傳的方法”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“Node.js實現斷點續傳的方法”吧!
方案分析
切片
斷點續傳
具體解決流程
邏輯分析
前端
服務端
小結
就是對上傳視頻進行切分，具體操作為：
File.slice(start,end)：返回新的blob對象
拷貝blob的起始字節
拷貝blob的結束字節
每次切片上傳之前，請求服務器接口，讀取相同文件的已上傳切片數
上傳的是新文件，服務端則返回0，否則返回已上傳切片數
該demo提供關鍵點思路及方法，其他功能如：文件限制，lastModifiedDate校驗文件重復性，緩存文件定期清除等功能擴展都可以在此代碼基礎上添加。
html
<input class="video" type="file" /> <button type="submit" onclick="handleVideo(event, '.video', 'video')"> 提交 </button>
script
let count = 0; // 記錄需要上傳的文件下標
const handleVideo = async (event, name, url) => {
// 阻止瀏覽器默認表單事件
event.preventDefault();
let currentSize = document.querySelector("h3");
let files = document.querySelector(name).files;
// 默認切片數量
const sectionLength = 100;
// 首先請求接口，獲取服務器是否存在此文件
// count為0則是第一次上傳，count不為0則服務器存在此文件，返回已上傳的切片數
count = await handleCancel(files[0]);
// 申明存放切片的數組對象
let fileCurrent = [];
// 循環file文件對象
for (const file of [...files]) {
// 得出每個切片的大小
let itemSize = Math.ceil(file.size / sectionLength);
// 循環文件size，文件blob存入數組
let current = 0;
for (current; current < file.size; current += itemSize) {
fileCurrent.push({ file: file.slice(current, current + itemSize) });
}
// axios模擬手動取消請求
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
// 當斷點續傳時，處理切片數量，已上傳切片則不需要再次請求上傳
fileCurrent =
count === 0 ? fileCurrent : fileCurrent.slice(count, sectionLength);
// 循環切片請求接口
for (const [index, item] of fileCurrent.entries()) {
// 模擬請求暫停 || 網絡斷開
if (index > 90) {
source.cancel("取消請求");
}
// 存入文件相關信息
// file為切片blob對象
// filename為文件名
// index為當前切片數
// total為總切片數
let formData = new FormData();
formData.append("file", item.file);
formData.append("filename", file.name);
formData.append("total", sectionLength);
formData.append("index", index + count + 1);
await axios({
url: `http://localhost:8080/${url}`,
method: "POST",
data: formData,
cancelToken: source.token,
})
.then((response) => {
// 返回數據顯示進度
currentSize.innerHTML = `進度${response.data.size}%`;
})
.catch((err) => {
console.log(err);
});
}
}
};
// 請求接口，查詢上傳文件是否存在
// count為0表示不存在，count不為0則已上傳對應切片數
const handleCancel = (file) => {
return axios({
method: "post",
url: "http://localhost:8080/getSize",
headers: { "Content-Type": "application/json; charset = utf-8" },
data: {
fileName: file.name,
},
})
.then((res) => {
return res.data.count;
})
.catch((err) => {
console.log(err);
});
};node服務端
// 使用express構建服務器api
const express = require("express");
// 引入上傳文件邏輯代碼
const upload = require("./upload_file");
// 處理所有響應，設置跨域
app.all("*", (req, res, next) => {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
res.header("Access-Control-Allow-Headers", "Content-Type, X-Requested-With ");
res.header("X-Powered-By", " 3.2.1");
res.header("Content-Type", "application/json;charset=utf-8");
next();
});
const app = express();
app.use(bodyParser.json({ type: "application/*+json" }));
// 視頻上傳（查詢當前切片數）
app.post("/getSize", upload.getSize);
// 視頻上傳接口
app.post("/video", upload.video);
// 開啟本地端口偵聽
app.listen(8080);upload_file
// 文件上傳模塊
const formidable = require("formidable");
// 文件系統模塊
const fs = require("fs");
// 系統路徑模塊
const path = require("path");
// 操作寫入文件流
const handleStream = (item, writeStream) => {
// 讀取對應目錄文件buffer
const readFile = fs.readFileSync(item);
// 將讀取的buffer || chunk寫入到stream中
writeStream.write(readFile);
// 寫入完后，清除暫存的切片文件
fs.unlink(item, () => {});
};
// 視頻上傳(切片)
module.exports.video = (req, res) => {
// 創建解析對象
const form = new formidable.IncomingForm();
// 設置視頻文件上傳路徑
let dirPath = path.join(__dirname, "video");
form.uploadDir = dirPath;
// 是否保留上傳文件名后綴
form.keepExtensions = true;
// err 錯誤對象 如果解析失敗包含錯誤信息
// fields 包含除了二進制以外的formData的key-value對象
// file 對象類型 上傳文件的信息
form.parse(req, async (err, fields, file) => {
// 獲取上傳文件blob對象
let files = file.file;
// 獲取當前切片index
let index = fields.index;
// 獲取總切片數
let total = fields.total;
// 獲取文件名
let filename = fields.filename;
// 重寫上傳文件名，設置暫存目錄
let url =
dirPath +
"/" +
filename.split(".")[0] +
`_${index}.` +
filename.split(".")[1];
try {
// 同步修改上傳文件名
fs.renameSync(files.path, url);
console.log(url);
// 異步處理
setTimeout(() => {
// 判斷是否是最后一個切片上傳完成，拼接寫入全部視頻
if (index === total) {
// 同步創建新目錄，用以存放完整視頻
let newDir = __dirname + `/uploadFiles/${Date.now()}`;
// 創建目錄
fs.mkdirSync(newDir);
// 創建可寫流，用以寫入文件
let writeStream = fs.createWriteStream(newDir + `/${filename}`);
let fsList = [];
// 取出所有切片文件，放入數組
for (let i = 0; i < total; i++) {
const fsUrl =
dirPath +
"/" +
filename.split(".")[0] +
`_${i + 1}.` +
filename.split(".")[1];
fsList.push(fsUrl);
}
// 循環切片文件數組，進行stream流的寫入
for (let item of fsList) {
handleStream(item, writeStream);
}
// 全部寫入，關閉stream寫入流
writeStream.end();
}
}, 100);
} catch (e) {
console.log(e);
}
res.send({
code: 0,
msg: "上傳成功",
size: index,
});
});
};
// 獲取文件切片數
module.exports.getSize = (req, res) => {
let count = 0;
req.setEncoding("utf8");
req.on("data", function (data) {
let name = JSON.parse(data);
let dirPath = path.join(__dirname, "video");
// 計算已上傳的切片文件個數
let files = fs.readdirSync(dirPath);
files.forEach((item, index) => {
let url =
name.fileName.split(".")[0] +
`_${index + 1}.` +
name.fileName.split(".")[1];
if (files.includes(url)) {
++count;
}
});
res.send({
code: 0,
msg: "請繼續上傳",
count,
});
});
};首先請求上傳查詢文件是否第一次上傳，或已存在對應的切片
文件第一次上傳，則切片從0開始
文件已存在對應的切片，則從切片數開始請求上傳
循環切片數組，對每塊切片文件進行上傳
其中使用了模擬手動暫停請求，當切片數大于90取消請求
接收查詢文件filename，查找臨時存儲的文件地址，判斷是否存在對應上傳文件
從未上傳過此文件，則返回0，切片數從0開始
已上傳過文件，則返回對應切片數
接收上傳文件切片，文件存入臨時存儲目錄
通過count和total判斷切片是否上傳完畢
上傳完畢，創建文件保存目錄，并創建可寫流，進行寫入操作
提取對應臨時文件放入數組，循環文件目錄數組，依次讀取并寫入文件buffer
寫入完畢，關閉可寫流。
以上代碼涉及到具體的業務流程會有所更改或偏差，這只是其中一種具體實現的方式。
希望這篇文章能對大家有所幫助，如果有寫的不對的地方也希望指點一二。
以上代碼地址：github.com/Surprise-li…
到此，相信大家對“Node.js實現斷點續傳的方法”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
