本教程展示瞭如何使用縮略圖創建可重新的視頻上傳器。該過程涉及使用node.js,socket.io和FileReader API進行客戶端服務器通信和文件處理。讓我們分解這些步驟:
簡介
可重新啟動的上傳器要求服務器跟踪上傳進度並從中斷中恢復。這是通過給出node.js服務器對數據請求的控制來實現的,而HTML表單響應這些請求。 socket.io促進服務器與客戶端之間的實時通信。
1。 HTML表單創建
使用文件輸入,名稱字段和上傳按鈕創建了一個簡單的HTML表單。表單元素包裹在 div
中,以更輕鬆地操縱JavaScript。 (此處包括表格的圖像)。
JavaScript事件偵聽器將上傳功能添加到上傳按鈕和文件輸入。 fileReader
API用於讀取文件塊並將其發送到服務器。 startUpload
函數啟動上傳過程。
3。構建socket.io服務器(node.js)
node.js服務器使用socket.io來處理通信。該服務器管理文件上傳,跟踪進度並恢復中斷上傳。 The server receives data in chunks (524288 bytes), stores temporary files, and handles the final file writing and thumbnail generation.
The server-side code includes:
Start
event handler to initialize a new upload or resume an existing one.Upload
event handler to receive and process data chunks.該處理程序管理數據緩衝區,將數據寫入臨時文件,然後排放 moredata
事件以請求更多塊。4。客戶端(JavaScript)處理服務器事件的處理
客戶端JavaScript通過讀取並將請求的數據塊發送到服務器來處理 moredata
事件。 webkitslice
方法用於有效塊。
5。最終確定上傳和縮略圖生成
服務器使用 fs.CreateReadStream
和 fs.CreateWriteStream
以及 util.pump
函數有效地將臨時文件移至最終目標。在文件上傳完成後,觸發了縮略圖生成(使用FFMPEG)。 完成事件通過成功消息和生成的縮略圖更新UI。
結論
這種方法創建了一個可靠,有效的可重新啟動視頻上傳器。進一步的增強功能可能包括用於持續上傳跟踪的數據庫集成以及使用專用的HTML5視頻播放器進行播放。
以上是如何在node.js中創建可重複的視頻上傳器的詳細內容。更多資訊請關注PHP中文網其他相關文章!