如何使用表單中的其他數據存儲圖像？

Question

我在嘗試使用Firebase存儲事件列表。每個事件都有典型的信息名稱，日期，位置和圖像。我嘗試使用文件api來將dataurl與其餘數據存儲在一個引用中，但似乎無法像所有其他數據一樣獲取該圖像。如何添加通過表單上傳圖片以及Firebase中名稱標識下的所有其他數據。

這是文件上更改事件的處理程序。

function onFileChanged(theEvt) { 
    var theFile = theEvt.target.files[0]; 

    // check to see if it is text 
    if (!theFile.type.match("image.*")) { 
     return; 
    } 

    var reader = new FileReader(); 

    reader.onload = function (evt) { 
     var resultdata = evt.target.result; 
     var file = theFile.name.replace(/\.[^\.]+$/, ''); 

     nameRef = new Firebase('https://firebaseio.com/events/' + file); 
     var f = nameRef.child('image'); 
     f.set(resultdata); 
    } 

    reader.readAsDataURL(theFile); 
} 

Answer 1

即片斷應該工作，只要該文件被表示爲數據URL（Base64編碼）。下面是我們在示例應用程序中的一個示例：https://github.com/firebase/firepano/blob/gh-pages/firepano.js - 除了此代碼段生成文件的隨機ID而不是從文件名中提取代碼外，代碼基本相同。

function handleFileSelect(evt) { 
    var f = evt.target.files[0]; 
    var reader = new FileReader(); 
    reader.onload = (function(theFile) { 
    return function(e) { 
     var filePayload = e.target.result; 
     var hash = CryptoJS.SHA256(Math.random() + CryptoJS.SHA256(filePayload)); 
     var f = new Firebase(firebaseRef + 'pano/' + hash + '/filePayload'); 
     spinner.spin(document.getElementById('spin')); 
     f.set(filePayload, function() { 
     spinner.stop(); 
     document.getElementById("pano").src = e.target.result; 
     $('#file-upload').hide(); 
     window.location.hash = hash; 
     }); 
    }; 
    })(f); 
    reader.readAsDataURL(f); 
}