Laden Sie ein Base64-Bild mit Firebase Storage

Question

Ich mache diese App, wo Benutzer ein Profilbild haben können (aber nur jeweils ein Bild). Ich habe alles eingerichtet, aber wenn die Bilder 2mb + sind, dauert es einige Zeit zu laden und tatsächlich brauche ich nur die Bilder zu 50kb oder so (nur kleine Anzeige von Bildern, maximal 40 Pixel). Ich habe einen Code erstellt, um die Bilder direkt in die Echtzeit-Datenbank zu stellen (in canvas konvertieren und daraus eine 7kb Base64-Zeichenkette machen). Dies ist jedoch nicht wirklich sauber und es ist besser Firebase Storage zu verwenden.

Seit dem neuen Update 3.3.0 können Sie mit Base64 formatierte Strings mit der Methode putString() in Storage laden. Wenn ich jedoch mein Canvas-Bild (das mit "data: image/jpeg; base64" beginnt) hochlade, erhalte ich folgende Fehlermeldung:

v {code: "storage/invalid-format", nachricht: "Firebase Speicher: String stimmt nicht mit dem Format 'base64' überein: Ungültiges Zeichen gefunden ", ServerResponse: null, Name:" FirebaseError "}.

Tritt dieser Fehler wegen der Zeichenfolge des Leinwandbildes am Anfang auf? Ich habe überall in Stack gesucht, aber ich kann die Antwort nicht finden.

Answer 1

Herrgott, ich bin jetzt schon sehr lange beschäftigt, aber nachdem ich das geschrieben habe, habe ich die Antwort selbst gefunden. Die Lösung bestand darin, die base64-Variable zu erhalten und die ersten 23 Ziffern zu entfernen (also: "data: image/jpeg; base64") und sie auf den Firebase-Speicher hochzuladen. Jetzt wird es akzeptiert und Sie können den Link in Ihrer Echtzeitdatenbank über setzen:

var storageRef = firebase.storage().ref().child("Whatever your path is in Firebase Storage"); 
var imageRef = "Your path in the Realtime Database"; 

    storageRef.getDownloadURL().then(function(url) { 
     imageRef.child("image").set(url); 
    }); 

    var task = storageRef.putString("Your base64 string substring variable", 'base64').then(function(snapshot) { 
     console.log('Uploaded a base64 string!'); 
     }); 

Answer 2

Ich hatte eigentlich das gleiche Problem und löste es durch putString(message, 'base64') mit und data:image/jpeg;base64, abschneidet.

Die Methode zum Hochladen Base64url formatiert Zeichenfolge putString(message, 'base64url') hat nicht für mich funktioniert. Es hat mir den gleichen Fehler zurückgegeben wie du. Versuchen Sie es mit putString(message, 'base64'). Ich hoffe es hilft!