我如何将fileReader之后的图像上传到firebase存储

Question

我想上传一个图像到firebase存储，必须是blob或文件，我想知道如何在使用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

好了，所以首先您在图片功能放置文件是一个blob。所以你应该做的是让它存储在某个地方，或者只是使用你放入的任何变量作为文件参数。这样你就可以在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]); 
}