0

Estoy tratando de retornar el valor en base64 del file que envío a la función pero no logro hacerlo. ¿Alguna idea?

Ya probé con return reader.result en el onload pero no funciona.

  
   
  $(document).ready(function(){
  
  $("#files").on("change", function(){
    var archivos = document.getElementById('files').files;
    for(x=0; x<archivos.length; x++){
      //deseo imprimir el base64
      alert(getBase64(archivos[x]));
    }
  });
    
    function getBase64(file) {
       var reader = new FileReader();
			   
	   reader.readAsDataURL(file);
	   reader.onload = function () {
	     console.log(reader.result);
	   };
	   reader.onerror = function (error) {
              console.log('Error: ', error);
           };
	}
    
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="file" id="files" multiple/>

7
  • Esa cadena que te imprime es correcta o estás esperando otro valor?
    – Yikarus
    el 11 jul. 2017 a las 22:14
  • ¿Qué cadena, Lixus? A mí me imprime "undefined" a ti sí te imprime un base64 correctamente? el 11 jul. 2017 a las 22:17
  • Quiero que me lo imprima en el "alert" y no en la consola. En la consola sí lo imprime, quiero que esa cadena que vez tú en la consola me la imprima en el alert. el 11 jul. 2017 a las 22:17
  • 1
    Dicho evento se dispara cuando FileReader termina de procesar el archivo, pues es un método asíncrono. el 11 jul. 2017 a las 22:28
  • Necesitas una promesa o usar $.Deferred de jQuery para poder obtener lo que imprime en consola y regresarlo a tu función
    – Yikarus
    el 11 jul. 2017 a las 22:33

2 respuestas 2

3

El problema es que reader.result lo estas obteniendo en un evento y se lanza en un hilo fuera de getBase64

Intenta usando callbacks

$(document).ready(function(){
  
  $("#files").on("change", function(){
    var archivos = document.getElementById('files').files;
    for(x=0; x<archivos.length; x++){
      //deseo imprimir el base64
      getBase64(archivos[x], onGetBase64);
    }
  });
  
  function onGetBase64(result){
    alert(result);
  }
    
    function getBase64(file, callback) {
       var reader = new FileReader();
			   
	   reader.readAsDataURL(file);
	   reader.onload = function () {
	     callback(reader.result);       
	   };
	   reader.onerror = function (error) {
              console.log('Error: ', error);
           };
	}
    
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="file" id="files" multiple/>

1

Usando callbacks

Este enfoque es el clásico. Si quieres procesar todas las imágenes juntas en lugar de en forma independiente, puedes usar una función recursiva y agregar un callback para ejecutarlo en cuanto se termine de procesar todos los blobs. También puedes usar librerías utilitarias para esto como async.

$("#files").on("change", function() {
  parseImages(Array.from(this.files), function(images) {
    console.log(images);
  });
});

function parseImages(files, cb, store = [], i = 0) {
  if (files.length === i) return cb(store);
  const _store = store.slice(0);
  getBase64(files[i], {
    onload(img) {
      _store.push(img);
      return parseImages(files, cb, _store, i + 1);
    },
    onerror: onBase64fail,
  });
}

function onBase64fail(err) {
  console.log(err);
}

function getBase64(file, { onload, onerror }) {
  const reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = () => onload(reader.result);
  reader.onerror = () => onerror(reader.error);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="files" type="file" multiple />

Usando promesas

Usando promesas es muy similar a usar callbacks, la diferencia radica en que esperas a que se resuelvan las promesas (conversiones) antes de proceder a devolverlas todas. Usando este estilo hace ver el código de forma síncrona.

$("#files").on("change", async function() {
  console.log(await parseImages(Array.from(this.files)));
});

async function parseImages(files, store = [], i = 0) {
  if (files.length === i) { return store; }
  const img = await getBase64(files[i]);
  const _store = store.slice(0);
  _store.push(img);
  return parseImages(files, _store, i + 1);
}

function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = () => reject(reader.error);
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="files" type="file" multiple />

También puedes usar Generadores para este propósito.

2
  • Oooh, men, qué hermosa respuesta! Es justo lo que necesito, como lo planteaba iba a ejecutar tantas imágenes fueran el número de veces la función y luego guardarlos en un arreglo pues lo enviaré así por post al servidor. Es justo lo que necesitaba, y de ambas formas. Qué me recomiendas usar tú? Por alguna razón se me ejecuta más rápido las callbacks que las promesas. Excelente respuesta, muchas gracias el 12 jul. 2017 a las 14:30
  • @user2930137 No existe una diferencia considerable de tiempos, sin embargo, hay algunos detalles que ocurren detrás de escenas y que pueden representar ganar o perder unos pocos ms. Por ejemplo, al usar await lo que haces técnicamente es una suspensión del thread de ejecución, por lo que, si lo comparas con el uso de callbacks en donde no pasa esto, pues este último enfoque te permitirá ganar unos pocos ms.
    – gugadev
    el 12 jul. 2017 a las 17:37

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.