本篇文章為大家介紹實現Node.js斷點續傳的方法。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有幫助。
平常業務需求:上傳圖片、Excel等,畢竟幾M的大小可以很快就上傳到伺服器。
針對於上傳影片等大檔案幾百M或幾G的大小,就需要等待比較長的時間。
這就產生了對應的解決方法,對於大檔案上傳時的暫停、斷網、網路較差的情況下, 使用切片 斷點續傳就能夠很好的應對上述的情況
#方案分析
-
#切片
- 就是對上傳影片進行切分,具體操作為:
- File.slice(start,end):傳回新的blob物件
- 拷貝blob的起始位元組
- 拷貝blob的結束位元組
-
#斷點續傳
- 每次切片上傳之前,請求伺服器接口,讀取相同文件的已上傳切片數
- 上傳的是新文件,服務端則返回0,否則返回已上傳切片數
#【推薦學習:《nodejs 教學》】
#具體解決流程
該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
- 寫入完畢,關閉可寫流。
- 接收查詢文件filename,尋找暫存的文件位址,判斷是否存在對應上傳文件
小結
#以上程式碼涉及到特定的業務流程會有所變更或偏差,這只是其中一種具體實現的方式。
希望這篇文章能對大家有幫助,如果有寫的不對的地方也希望指點一二。
- 以上程式碼位址:https://github.com/Surprise-ling/uploadFile
更多程式相關知識,請造訪:程式設計影片! !
以上是Node.js如何實作斷點續傳的詳細內容。更多資訊請關注PHP中文網其他相關文章!

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1)C/C 是靜態類型語言,需手動管理內存,而JavaScript是動態類型,垃圾回收自動處理。 2)C/C 需編譯成機器碼,JavaScript則為解釋型語言。 3)JavaScript引入閉包、原型鍊和Promise等概念,增強了靈活性和異步編程能力。

不同JavaScript引擎在解析和執行JavaScript代碼時,效果會有所不同,因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析:將源碼轉換為詞法單元。 2.語法分析:生成抽象語法樹。 3.優化和編譯:通過JIT編譯器生成機器碼。 4.執行:運行機器碼。 V8引擎通過即時編譯和隱藏類優化,SpiderMonkey使用類型推斷系統,導致在相同代碼上的性能表現不同。

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制:1.通過Node.js實現服務器端編程,適用於高並發請求處理。 2.通過ReactNative進行移動應用開發,支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制,適用於硬件交互。

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序(一個Edtech應用程序),您可以做同樣的事情。 首先,什麼是多租戶SaaS應用程序? 多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

本文展示了與許可證確保的後端的前端集成,並使用Next.js構建功能性Edtech SaaS應用程序。 前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript是現代Web開發的核心語言,因其多樣性和靈活性而廣泛應用。 1)前端開發:通過DOM操作和現代框架(如React、Vue.js、Angular)構建動態網頁和單頁面應用。 2)服務器端開發:Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發:通過ReactNative和Electron實現跨平台開發,提高開發效率。

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

JavaScript是現代Web開發的基石,它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發,極大地提升了用戶體驗和跨平台開發的靈活性。


熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

SublimeText3 Linux新版
SublimeText3 Linux最新版

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

ZendStudio 13.5.1 Mac
強大的PHP整合開發環境

SAP NetWeaver Server Adapter for Eclipse
將Eclipse與SAP NetWeaver應用伺服器整合。

EditPlus 中文破解版
體積小,語法高亮,不支援程式碼提示功能