Node.js實現斷點續傳
阿新 • • 發佈:2021-06-25
目錄
- 方案分析
- 切片
- 斷點續傳
- 具體解決流程
- 邏輯分析
- 前端
- 服務端
- 小結
方案分析
切片
- 就是對上傳視訊進行切分,具體操作為:
- 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 / sectionLen程式設計客棧gth); // 迴圈檔案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 = expre程式設計客棧ss(); 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取消請求
- 其中使用了模擬手動暫停請求,當切片數大於90取消請求
服務端
- 接收查詢檔案filename,查詢臨時儲存的檔案地址,判斷是否存在對應上傳檔案
- 從未上傳過此檔案,則返回0,切片數從0開始
- 已上傳過檔案,則返回對應切片數
- 接收上傳檔案切片,檔案存入臨時儲存目錄
- 通過count和total判斷切片是否上傳完畢
- 上傳完畢,建立檔案儲存目錄,並建立可寫流,進行寫入操作
- 提取對應臨時檔案放入陣列,迴圈檔案目錄陣列,依次讀取並寫入檔案buffer
- 寫入完畢,關閉可寫流。
小結
以上程式碼涉及到具體的業務流程會有所更改或偏差,這只是其中一種具體實現的方式。
希望這篇文章能對大家有所幫助,如果有寫的不對的地方也希望指點一二。
以上程式碼地址:github.com/Surprise-li…
以上就是Node.js實現斷點續傳的詳細內容,更多關於Node.js 斷點續傳的資料請關注我們其它相關文章!