Soy muy nuevo en este concepto de asíncrono, espera, promesa... paradigmas... Por favor, ayúdenme
Tengo un campo de entrada como este
Tengo una variable global var base64 . Cómo llenar la variable global base64 con un valor codificado base. Dentro de la función en addEventListener reader.result muestra el valor codificado base. ¿Cómo puedo pasarlo a una variable global externa? Intenté mucho ... ya que parece ser una función asíncrona ... el comportamiento parece ser bastante diferente y parece muy difícil en ponerse al día y además no estoy obteniendo el resultado esperado
<input type="file" id="photo" accept="image/*" required @change="UploadPhoto()" />La función de cambio de UploadPhoto() es ..{Esto lo obtuve de Mozilla}
function UploadPhoto() { const file = document.querySelector('#photo').files[0]; const reader = new FileReader(); reader.addEventListener("load", function () { // convert image file to base64 string console.log(reader.result); }, false); if (file) { reader.readAsDataURL(file); } } También le agradecería que me explicara el funcionamiento de reader.addEventListener y reader.readAsDataURL(file); con el caso de comportamiento asincrónico... Busqué mucho en Google pero no pude encontrar un artículo con una explicación detallada de estas dos funciones.
Querer un global (en este caso) es síntoma de no tener las herramientas necesarias para prescindir de él.
Si realmente necesitaras un global, podrías conseguirlo de esta manera...
let b64Encoded; function UploadPhoto() { const file = document.querySelector('#photo').files[0]; const reader = new FileReader(); reader.addEventListener("load", function () { // convert image file to base64 string b64Encoded = btoa(reader.result); }, false);Pero, como supones, la forma moderna de hacerlo es usar promesas. Esto hará que el código sea más fácil de entender y será una decisión aún mejor cuando llegue a publicar el archivo codificado...
Primero envuelva el lector de archivos en una promesa. Aquí hay una buena publicación sobre el tema , y aquí está el remate (ligeramente modernizado)
async function readAsDataURL(file) { return new Promise((resolve, reject) => { const fr = new FileReader(); fr.onerror = reject; fr.onload = () => { resolve(fr.result); } fr.readAsDataURL(file); }); }Úsalo así:
// we don't need this anymore :-) // let b64Encoded; async function UploadPhoto() { const file = document.querySelector('#photo').files[0]; const result = await readAsDataURL(file); const b64Encoded = btoa(result); // stack var, as it should be! // insert real (promise-based) network code here return myNetworkLibrary.post(b64Encoded); } El método addEventListener en el lector de archivos es parte de la vieja escuela asíncrona: dice: el lector de archivos va a hacer E/S en un subproceso separado. Le dirá cuándo está hecho (esa es la parte del "evento") llamando a una función que especifique (esa es la parte del "oyente"), pásele una función para llamar (esa es la parte "agregar").