fileReaderの後にイメージをファイルベースのストレージにアップロードする方法

Question

ファイルベースである必要があるfirebaseストレージにイメージをアップロードしようとしていますが、filereaderを使用した後にどうすればいいでしょうか？

function image(file, idOfImage){ 
    var fr = new FileReader(); 
    var imgCar = document.createElement('img') 
    imgCar.id = idOfImage 
    fr.onload = function() { 
     imgCar.src = fr.result; 
    } 
    fr.readAsDataURL(file); 
    document.body.append(imgCar) 
} 
// sometime later... I might call uploadImage() if user wants to save this image or other image... 
// (I am calling image() a couple of times so multiple images on window) 
function uploadImage(idOfImage){ 
    var image = document.getElementById(idOfImage) 
    storage.ref('...').put(image); // I get error since not blob or file 
    //storage.ref('...').put(image.src); // I get same error since not blob or file 
} 

Answer 1

[OK]をので、まず、あなたがイメージ機能に置くファイルはブロブです。だから、あなたがするべきことは、どこかに格納されているか、ファイルパラメータとして配置された変数を使用することだけです。この方法で、uploadImage()で使用できます。たとえば：

// This is for the examples sake, but you need to save the file you give to image() somewhere (e.g. the variable below) 
var imageBlob = {}; 

function image(file, idOfImage) { 
    imageBlob = file; 
    var fr = new FileReader(); 
    var imgCar = document.createElement('img'); 
    imgCar.id = idOfImage; 
    fr.onload = function() { 
    imgCar.src = fr.result; 
    } 
    fr.readAsDataURL(file); 
    document.body.append(imgCar) 
} 
// sometime later 
function uploadImage() { 
    storage.ref('...').put(imageBlob); // I get error since not blob or file 
} 

あなたが<input type="file">メソッドを使用してアップロードする場合は、あなただけのfunction uploadImageで次の操作を行うことができます：私はより明確にされている必要があります

function uploadImage() { 
    // This will get the first uploaded file and upload it to firebase storage 
    // All files uploaded are actually blobs (it extends the blob object) 
    storage.ref('...').put(input.files[0]); 
}