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>
瀏覽器顯示效果是這樣的:
點擊空白長條或「瀏覽…」按鈕可以開啟檔案瀏覽視窗選擇需要上傳的檔案:
建立伺服器接收檔案邏輯
伺服器檔案websvr.js 程式碼是這樣的:
var fs = require('fs') var path = require('path') var onceio = require('../onceio/onceio') var app = onceio() app.get('/', function(req, res){ res.render('file.html') }) app.file('/file/upload', function(req, res) { var fileInfo = req.files.file || {} fs.link(fileInfo.path, path.join('./fileStore', fileInfo.name)) res.send('File Uploaded Successfully') }).before(function(req, res) { var contentLength = req.headers['content-length'] || 0 if (contentLength > 1048576) { res.send({ error: 'Error: File Size Limit (1 MB) Exceeded' }) } else { return true } })
var fs = require('fs') 和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 ('+') 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('./fileStore', timestampName(fileInfo.name)))
改進後的伺服器程式就能允許使用者上傳重名檔案了,以上傳5 次名為'cache_workflow.png' 的檔案為例,伺服器的檔案儲存位址會出現5 個名稱都以'cache_workflow' 開頭但時間戳不同的檔案: