如何使用node + mongoose從二進制數據設置圖像的html源碼

Question

好吧，我第一次嘗試這個，因此我不確定一些事情。

首先，我在貓鼬用於存儲個人資料圖片型號：

var pictureSchema = new mongoose.Schema ({ 
    _id  : {"type": String , "required": true, "default": "", "unique": true}, 
    picture : {"type": Buffer , "required": false, "default": ""}, 
    _revision: {"type": Number , "required": true, "default": 0} 
}); 

的第一個問題是空字符串是否良好作爲緩衝區默認值。在創建集合中的有關文件，我可以看到在蒙戈外殼下面：

> db.pictures.findOne(); 
{ "_id" : "user1", "_revision" : 0, "picture" : BinData(0,""), "__v" : 0 } 
> 

到目前爲止，它看起來非常正常。現在我想在文檔的圖片屬性中存儲從瀏覽器上傳的圖片。爲此我使用FileReader，並使用reader.readAsBinaryString(file);（我的其他選項似乎是reader.readAsDataURL(file);，但我認爲我想要二進制版本）讀取圖片。

迄今爲止這麼好。我正在執行PUT http請求，以便我可以替換數據庫中的文檔，其中JSON文檔的「圖片」屬性已設置爲等於event.target.result從與FileReader關聯的文件事件處理程序。這部分看起來很合理，因爲我在製作正在傳輸的JSON對象的console.log時可以看到很多字符。

但是，現在我可能有我的第一個問題，因爲在JSON對象中，我收到「圖片」屬性開始像PNG\r\n\u001a\n\u0000\u0000\u0000\rIHDR\u0000\u0000\u0000。在mongo shell中的另一個查詢顯示「圖片」是BinData(0,"wolQTkcNChoKAAAADUlIRFIAAAB9AAAA....)，因此，開頭的字符是不同的。首先，我是否正確地進行傳輸？

然後，當我再次獲取相同的文檔以便我可以再次讀取圖片時，我想將img的源設置爲等於我剛剛從JSON中讀取的二進制數據。

如何設置imgsource等於我在JSON對象中的二進制數據？這是我不知道如何去做的真正問題。

預先感謝您的時間。

更新：10月22日

我實際上設法解決我的問題，但我不滿意我的方法。特別是，當我用FileReader加載完圖像時，我使用btoa將內容轉換爲ascii;即類似的方法

mem.ascii = window.btoa(mem.file); 

其中在mem.file中存儲了FileReader的結果。順便說一句，我這次也使用方法reader.readAsDataURL(file);根據分散在互聯網上的答案/教程。同樣，我改變了我的模型，並在picture屬性中將其設置爲String而不是Buffer。然後 - 至少對我來說 - ，奇蹟發生了，我可以看到picture屬性的值開始這樣

"data:image/png;base64,iVBORw0KGgoAAAAN....." 

但後來根據我周圍所有的挖掘可以簡單地發回給客戶端和看看它是否有效;特別是因爲那時我很高興this answer存在。事實上，沒有客戶端上的轉換什麼，我只是設置圖像的來源與形式

$('<img>', { src: mem.file }).appendTo('#picPreview'); 

這種方法的優點的命令是我結束了不使用在所有Blobs這似乎使有關到我正在做的事情，但我完全無能爲力（並沒有管理我有限的嘗試去做一個工作的例子）。

但儘管如此，因爲現在在模型中的畫面被描述爲String，而不是Buffer這應該是真實的東西，我不是很滿意這個解決方案。

Answer 1

這個問題： 如何設置img源碼與我在JSON對象中的二進制數據相等？這是我不知道如何去做的真正問題。

$("img").attr("src", "data:image/png;base64," + binaryData);