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("h2"); 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實現斷點續傳的詳細內容,更多關於Node.js 斷點續傳的資料請關註WalkonNet其它相關文章!
推薦閱讀:
- js前端上傳文件縮略圖技巧示例詳解
- 前端使用koa實現大文件分片上傳
- JavaScript 下載鏈接圖片後上傳的實現
- 如何基於js管理大文件上傳及斷點續傳詳析
- Jmeter並發執行Python 腳本的完整流程