Base64-Image mit Firebase 3 hochladen

Question

Es ist möglich, Base64-Image auf Firebase hochzuladen?

Ich habe diesen Code versucht:

    var storageRef = firebase.storage().ref(); 
       console.log(storageRef);           
       var file = "data:image/jpeg;base64,BASE64....."; 

       var uploadTask = storageRef.child('avatars/'+user.providerData[0].uid+'/photo-'+$scope.number+'.jpg').put(file); 
       uploadTask.on('state_changed', function(snapshot){ 
       }, function(error) { 
        console.log('error'); 
       }, function() { 
        console.log('success'); 
        var downloadURL = uploadTask.snapshot.downloadURL; 
       }); 

Aber ich habe einen Fehler:

{code: "storage/invalid-argument", message: "Firebase Storage: Invalid argument in `put` at index 0: Expected Blob or File.", serverResponse: null, name: "FirebaseError"} 

Answer 1

Sie die base64 in eine Funktion übergeben kann, die einen Klecks wie diese gibt:

base64toBlob(base64Data, contentType) { 
     contentType = contentType || ''; 
     var sliceSize = 1024; 
     var byteCharacters = atob(base64Data); 
     var bytesLength = byteCharacters.length; 
     var slicesCount = Math.ceil(bytesLength/sliceSize); 
     var byteArrays = new Array(slicesCount); 

     for (var sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) { 
      var begin = sliceIndex * sliceSize; 
      var end = Math.min(begin + sliceSize, bytesLength); 

      var bytes = new Array(end - begin); 
      for (var offset = begin, i = 0 ; offset < end; ++i, ++offset) { 
       bytes[i] = byteCharacters[offset].charCodeAt(0); 
      } 
      byteArrays[sliceIndex] = new Uint8Array(bytes); 
     } 
     return new Blob(byteArrays, { type: contentType }); 
    } 

Answer 2

Firebase Lagerung nimmt die JS File oder Blob Typen, anstatt einen String. Sie können Ihre base64-kodierten Daten in einer Datei speichern und dann hochladen, obwohl ich empfehle, sie in eine "echte" Datei zu konvertieren (jpg oder png). Sie können also einen Inhaltstyp haben, den Browser behandeln lassen als solche erhalten Vorteile wie Kompression usw.

Answer 3

Sie nur die putString Funktion ohne die Umwandlung verwenden müssen BASE64 zu blob.

firebase.storage().ref('/your/path/here').child('file_name') 
.putString(your_base64_image, ‘base64’, {contentType:’image/jpg’}); 

Stellen Sie sicher, die Metadaten zu übergeben {content: 'image/jpg'} als der dritte Parameter (optional) an die Funktion putString, um für Sie die Daten in einem Bild zum Abrufen Format.

oder einfach ausgedrückt:

uploadTask = firebase.storage().ref('/your/path/here').child('file_name').putString(image, 'base64', {contentType:'image/jpg'}); 
uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED, // or 'state_changed' 
    function(snapshot) { 
    // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded 
    var progress = (snapshot.bytesTransferred/snapshot.totalBytes) * 100; 
    console.log('Upload is ' + progress + '% done'); 
    switch (snapshot.state) { 
     case firebase.storage.TaskState.PAUSED: // or 'paused' 
     console.log('Upload is paused'); 
     break; 
     case firebase.storage.TaskState.RUNNING: // or 'running' 
     console.log('Upload is running'); 
     break; 
    } 
    }, function(error) { 
    console.log(error); 
}, function() { 
    // Upload completed successfully, now we can get the download URL 
    var downloadURL = uploadTask.snapshot.downloadURL; 
}); 

Sie können dann mit dem downloadURL speichern firebase.database() und/oder als src zu einem <img> Tag legen.