2016-04-14 36 views
-1

我需要將圖像文件寫入mongoDB,並將其讀取到html頁面元素。 我覺得這篇文章Meteor: uploading file from client to Mongo collection vs file system vs GridFS用Meteor寫入/讀取圖像到MongoDB。

嘗試用第一種方式將文件寫入數據庫:通過DDP將文件保存到mongo集合中。

我用RoboMongo打開我的數據庫,並在那裏找到我的圖像作爲二進制類型字段。

現在我又遇到了另一個麻煩:我找不到方法,我可以從數據庫讀取圖像,並將其從二進制對象轉換爲圖像,並將其用作流星應用程序中的圖像。

請幫助,舉幾個例子,我如何在Meteor中做這個操作。

這裏是我的代碼刻寫的圖像到DB

var image_buffer; 

Template.group_add_modal.events({ 

    'click #create-group':function(event, template){ 

     console.log('create group clicked'); 

     var group_name = template.find('#new-group-name').value, 
      group_desc = template.find('#new-group-desc').value, 
      reader = new FileReader(), 
      group = {}; 


     group = { 
      created_by:Meteor.userId(), 
      created_at: new Date(), 
      name:group_name, 
      description:group_desc, 
      image:image_buffer, 
      participants:[ 
       Meteor.userId() 
      ] 
     }; 
     console.log(image_buffer); 
     addGroupDocument(group); 
     Modal.hide(); 


     function addGroupDocument(document){ 
      groups.insert(document); 
     } 
    }, 

    'change #new-group-image' : function(event,template){ 
     var file = event.target.files[0]; 

     console.log('change new group image event'); 
     if (!file) return; 

     var reader = new FileReader(); 

     reader.onload = function(event){ 
      image_buffer = new Uint8Array(reader.result); 
      console.log('image buffered'); 
     } 

     reader.readAsArrayBuffer(file); 
    } 

}); 

回答

0

這是響應我的問題:

template.find('#group-image').src = 'data:image/png;base64,'+encode(image_buffer); 

    function encode (input) { 
     console.log(input); 
     var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz/="; 
     var output = ""; 
     var chr1, chr2, chr3, enc1, enc2, enc3, enc4; 
     var i = 0; 

     while (i < input.length) { 
      chr1 = input[i++]; 
      chr2 = i < input.length ? input[i++] : Number.NaN; // Not sure if the index 
      chr3 = i < input.length ? input[i++] : Number.NaN; // checks are needed here 

      enc1 = chr1 >> 2; 
      enc2 = ((chr1 & 3) << 4) | (chr2 >> 4); 
      enc3 = ((chr2 & 15) << 2) | (chr3 >> 6); 
      enc4 = chr3 & 63; 

      if (isNaN(chr2)) { 
       enc3 = enc4 = 64; 
      } else if (isNaN(chr3)) { 
       enc4 = 64; 
      } 
      output += keyStr.charAt(enc1) + keyStr.charAt(enc2) + 
       keyStr.charAt(enc3) + keyStr.charAt(enc4); 
     } 
     return output; 
    }