Node.js開發教學課程之基於OnceIO框架實作檔案上傳與驗證功能-js教程-PHP中文網

首頁

web前端

js教程

Node.js開發教學課程之基於OnceIO框架實作檔案上傳與驗證功能

高洛峰

Dec 24, 2016 pm 05:17 PM

OnceIO 是OnceDoc 企業內容(網盤)的底層Web框架，它可以實現模板檔案、靜態檔案的全緩存，運行起來完全不需要I/O操作，並且支援客戶端快取優化，GZIP壓縮等（只在第一次壓縮），擁有非常好的效能，為您節省伺服器成本。它的模組化功能，可以讓你的Web進行分散式存儲，即一個擴展包裡即包含前端、後端和數據庫定義，只需通過添加/刪除目錄的方式就可實現功能刪減，實現真正的模組化擴充。這裡是介紹如何使用OnceIO的一系列文章。

在這一章節中，我們將為大家示範如何使用 OnceIO 實作檔案上傳功能。

在網頁檔案中建立表單

以一個只有檔案上傳功能的簡單網頁file.html 為例：

<!DOCTYPE html>
<html>
<body>
<form method="post" enctype="multipart/form-data" action="/file/upload">
<input type="file" name="file" /><br>
<input type="submit" value="Upload" />
</form>
</body>
</html>

瀏覽器顯示效果是這樣的：

Node.js開發教學課程之基於OnceIO框架實作檔案上傳與驗證功能

點擊空白長條或「瀏覽…」按鈕可以開啟檔案瀏覽視窗選擇需要上傳的檔案：

Node.js開發教學課程之基於OnceIO框架實作檔案上傳與驗證功能

建立伺服器接收檔案邏輯

伺服器檔案websvr.js 程式碼是這樣的：

var fs = require(&#39;fs&#39;)
var path = require(&#39;path&#39;)
var onceio = require(&#39;../onceio/onceio&#39;)
var app = onceio()
app.get(&#39;/&#39;, function(req, res){
res.render(&#39;file.html&#39;)
})
app.file(&#39;/file/upload&#39;, function(req, res) {
var fileInfo = req.files.file || {}
fs.link(fileInfo.path, path.join(&#39;./fileStore&#39;, fileInfo.name))
res.send(&#39;File Uploaded Successfully&#39;)
}).before(function(req, res) {
var contentLength = req.headers[&#39;content-length&#39;] || 0
if (contentLength > 1048576) {
res.send({ error: &#39;Error: File Size Limit (1 MB) Exceeded&#39; })
} else {
return true
}
})

(和var path = require('path') 分別導入了Node.js 提供的操作檔案的檔案系統（fs）模組和用於處理檔案路徑的path 模組。

app.file(path, callback).before(callback) 相當於 app.use(path, callback, {file: true}).before(callback) ，是處理上傳的檔案的中間件。

檔案被上傳後，它的大小、存放位址、名稱、格式和修改時間五項資訊會被放在req.files 的file 屬性裡（名稱是type 為'file' 的input 標籤中name 的值），它的尺寸資訊會被放在req.headers 的content-length 屬性裡。

before函數

before是OnceIO與其它Web框架的主要區別之一。它可以在文件接收之前就對文件進行一些基本驗證，如大小、類型等，以求獲得最侍性能。 return true 表示驗證通並開始接收文件，否則就關閉連接，取消上傳。在 before 中，req.session物件是不可用的，因為session可能存在檔案或資料庫redis中，取得session是一個非同步過程需要時間。而before函數需要立刻對文件合法性做出判斷。

在這個例子中before回呼函數根據req.headers 中的content-length 判斷上傳的檔案是否超出了尺寸限制（開發人員可以透過修改if 語句中的常數來改變檔案上傳尺寸上限，content-length 單位為byte ，1024 * 1024 即代表1 MB），如果超出了，檔案不會被上傳，伺服器傳回錯誤訊息；如果沒有超出，函數傳回值為true，伺服器繼續執行app.file 中的回呼函數，將檔案從暫時地址轉移到指定儲存地址，檔案上傳到這裡就完成了。

解決檔案重名問題

我們目前的伺服器程式是無法解決檔案重名問題的。如果使用者上傳了重名的文件，伺服器將會傳回文件已經存在的錯誤。為了解決這個問題，我們可以在檔案的主檔案名稱和拓展名稱之間加入時間戳，進行這個處理的函數程式碼如下：

var timestampName = function(fileName){
// get filename extension
var extName = path.extname(fileName)
// get base name of the file
var baseName = path.basename(fileName, extName)
// insert timestamp between base name and filename extension
// the plus sign (&#39;+&#39;) before new Date() converts it into a number
return baseName + +new Date() + extName
}

再把fs.link 語句裡的fileInfo.name 替換為timestampName(fileInfo.name)：

fs.link(fileInfo.path, path.join(&#39;./fileStore&#39;, timestampName(fileInfo.name)))

改進後的伺服器程式就能允許用戶上傳重名檔案了，以上傳5 次名為'cache_workflow.png' 的檔案位址中會出現5 個名稱都以'cache_workflow' 開頭但時間戳不同的檔案：

Node.js開發教學課程之基於OnceIO框架實作檔案上傳與驗證功能

OnceIO位址： https://github.com/OnceDoc/onceio

範例原始碼： https://github.com /OnceDoc/OnceAcademy/tree/master/Lesson14

以上所述是小編給大家介紹的Node.js開發教程之基於OnceIO框架實現文件上傳和驗證，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回覆大家的。在此也非常感謝大家對PHP中文網的支持！

更多Node.js開發教程之基於OnceIO框架實現文件上傳和驗證功能相關文章請關注PHP中文網！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

超越瀏覽器：現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

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

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

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

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

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

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

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

JavaScript的演變：當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

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

神秘的JavaScript：它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

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