1. 程式人生 > >在NodeJS中使用jQuery file upload plugin

在NodeJS中使用jQuery file upload plugin

https://github.com/blueimp/jQuery-File-Upload 是一個相對完備的Web檔案上傳元件。這個元件不僅具備檔案上傳的功能,還具備遠端檔案管理的功能。目前是最流行的jQuery檔案上傳元件。
這個元件只有客戶端,沒有服務端,需要開發者自己提供服務端。在其Sample中有一個NodeJS的服務端,不過是一個獨立伺服器,如果要整合到自己的已有的NodeJS程式中,還需要花費一番功夫。
最開始我想把它提供的Sample NodeJS程式碼修改,整合到我自己的伺服器中,不過讀了一遍Sample程式碼之後,我就放棄了,太複雜了。
不過在其README中介紹了一箇中間件,很容易與其介面整合:https://github.com/aguidrevitch/jquery-file-upload-middleware
用上了之後,發現雖然檔案上傳成功了,但是介面上顯示失敗:“Empty file upload result”。到Google搜尋,有人說是jQuery file upload plugin的介面變了,由:[{file1},{file2}] 變為了 {files: [{file1},{file2}]}。
通過抓包發現後臺返回的資料是
[
{
“name”: “iPhone5 docking station.jpeg”,
“originalName”: “iPhone5 docking station.jpeg”,
“size”: 9584,
“type”: “image/jpeg”,
“delete_type”: “DELETE”,
“url”: “http://localhost/uploads/iPhone5%20docking%20station.jpeg”,
“delete_url”: “http://localhost/product/upload/iPhone5%20docking%20station.jpeg”,
“thumbnail_url”: “http://localhost/uploads/thumbnail/iPhone5%20docking%20station.jpeg”
}
]
找到https://github.com/aguidrevitch/jquery-file-upload-middleware的原始碼,修改返回資料為新的格式後,果然成功了。新的資料格式:
{ files:
[
{
“name”: “iPhone5 docking station.jpeg”,
“originalName”: “iPhone5 docking station.jpeg”,
“size”: 9584,
“type”: “image/jpeg”,
“delete_type”: “DELETE”,
“url”: “http://localhost/uploads/iPhone5%20docking%20station.jpeg”,
“delete_url”: “http://localhost/product/upload/iPhone5%20docking%20station.jpeg”,
“thumbnail_url”: “http://localhost/uploads/thumbnail/iPhone5%20docking%20station.jpeg”
}
]
}

我已經提了一個issue:https://github.com/aguidrevitch/jquery-file-upload-middleware/issues/23,目前檢視最新的原始碼,已經修正了這個問題。有興趣的朋友,到github上follow me,哈哈 @ibusybox