Guarde la imagen codificada en base64 en Firebase Storage

Natalia, parte de este equipo, nos ha hecho el favor de escribir este tutorial porque domina muy bien este tema.

Solución:

Solo necesitas usar el ponerCadena función sin convertir el BASE64 a blob.

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

Asegúrate de pasar los metadatos tipo de contenido: ‘imagen/jpg’ como el tercer parámetro (opcional) a la función putString para que pueda recuperar los datos en formato de imagen.

o simplemente poner:

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;
);

A continuación, puede utilizar el URL de descarga para guardar en firebase.database() y/o para poner como src en un

etiqueta.

La última versión del SDK de Firebase admite cargas de imágenes base64. Simplemente use el putString método de Firebase Storage.

https://firebase.google.com/docs/reference/js/firebase.storage

Una pequeña advertencia es que a veces tendrá una cadena base64 con espacios en blanco innecesarios. Por ejemplo, descubrí que el complemento Cordova Camera devuelve base64 con espacios en blanco innecesarios. El SDK de almacenamiento no podrá cargar esto porque JavaScript no puede realizarlo de forma nativa. atob función: algo que Firebase JS hace bajo el capó. Tendrá que eliminar los espacios en blanco: consulte el error DOM Exception 5 INVALID CHARACTER en una imagen base64 válida string en javascript

Sí, ahora es posible. Debe usar el nuevo método Firebase Storage llamado putString. Puede leer las especificaciones aquí.

Entonces, la especificación de Firebase dice que ahora tiene dos métodos para almacenar Base64 string y Base64url string:

// Base64 formatted string
var message = '5b6p5Y+344GX44G+44GX44Gf77yB44GK44KB44Gn44Go44GG77yB';
ref.putString(message, 'base64').then(function(snapshot) 
  console.log('Uploaded a base64 string!');
);

// Base64url formatted string
var message = '5b6p5Y-344GX44G-44GX44Gf77yB44GK44KB44Gn44Go44GG77yB';
ref.putString(message, 'base64url').then(function(snapshot) 
  console.log('Uploaded a base64url string!');
)

Desde mi experiencia, usando putString(message, 'base64url') devuelve constantemente Error sobre Base64 mal formateado string código: “almacenamiento/formato no válido”, mensaje: “Almacenamiento de Firebase: la cadena no coincide con el formato ‘base64’: se encontró un carácter no válido”. La solución es cortar el principio de string data:image/jpeg;base64, y use el primer método en su lugar putString(message, 'base64'). Entonces funciona.

Puntuaciones y reseñas

Tienes la posibilidad difundir esta reseña si te fue de ayuda.

---

---

Utiliza Nuestro Buscador