2016-12-01 69 views
2

我正在使用dropzone-react組件上傳圖片。上傳後,它給了我blob:http://test地址,如果我打開它,我可以看到我上傳的圖片。 現在我面臨的挑戰是我想將此圖像保存爲MongoDB中的blob類型。將圖像保存爲mongodb,React

這是我選擇上傳圖片後調用的當前代碼。文件[0] .preview顯示正確的URL。此外console.log(blob)顯示在控制檯中的BLOB(但我無法找到一個數據段,也許這是什麼問題?

onFileDrop(files) { 
    var xhr = new XMLHttpRequest(); 
    console.log(files[0].preview); 
    xhr.open('GET', files[0].preview, true); 
    xhr.responseType = 'blob'; 
    xhr.onload = function(e) { 
     if (this.status == 200) { 
      var blob = xhr.response; 
      console.log(blob); 
      Database.update({_id : _stateId}, { $push : {picture : blob}}); 
      } 
     }; 
    xhr.send(); 

但經過我更新數據庫中的圖像元素是在MongoDB的只是空的。我試着保存xhr.response.type和這個工程,但我不知何故必須訪問的數據存儲在MongoDB內,並檢索它作爲我的代碼中的另一行上的圖片

我錯過了一些關鍵的一步,或者有甚至一個更簡單的方法來保存mongoDB中的圖像通過使用反應?

我使用的流星框架,如果這是一個IMPO rtant信息。

回答

1

您應該將文件發送到服務器的REST端點,並從服務器發送圖像到您的數據庫(在這種情況下是MongoDB)。

Take a look at this example

+1

這就是我們如何解決它到底,謝謝! – ch1ll

+0

沒問題的人,很高興有幫助! –

2

我遲到了,但不是將圖像保存爲blob,而是將base64編碼,然後將字符串作爲純文本存儲在數據庫中。

我已經在過去的項目中完成了這項工作,並且存儲字符串比在mongoDB中存儲/檢索二進制數據更容易。

缺點是Base64編碼的二進制文件比原始二進制文件佔用的空間大約多37%。

Wikipedia article about Base64

+0

感謝您的回答。我已經提交了這個項目,所以我不會再改變它了。但是,這將是一個非常好的主意,因爲它只是一些小圖像 - 所以空間佔用率沒有問題。 – ch1ll