Tengo un campo de entrada para aceptar la imagen.
El campo de entrada es así
<input type="file" id="photo" accept="image/*" required @change="UploadPhoto" />Este campo de entrada está dentro de la plantilla de vuejs. La versión de vue que estoy usando es 3.
Estoy llamando a un método UploadPhoto() al cargar una imagen.
Estoy tratando de codificar la imagen a base64
UploadPhoto() { const file = document.querySelector('#photo').files[0]; const reader = new FileReader(); reader.addEventListener("load", function () { this.photo=reader.result; //On console.log(this.photo) here shows base46 encoded value }, false); if (file) { reader.readAsDataURL(file); } console.log('Base 64 of the Upload Photo'+ this.photo);//On console.log(this.photo) here doesnot shows base46 encoded value instead shows as null } ,He inicializado la foto dentro de los datos como una cadena en blanco.
En console.log(this.photo) dentro de la función addEventListner() muestra el valor codificado en base46
En console.log(this.photo) fuera de la función addEventListner(), se muestra el valor codificado en base46 en blanco
Cómo pasar la imagen de código base en la función addEventListner () al alcance externo, es decir, this.photo
Después de cargar la foto, obtengo this.photo como nula .Base64 de la imagen, que es
Esto parece ser un problema con las llamadas asincrónicas. Un detector de eventos no se activa de inmediato, y parece que su console.log se ejecuta antes de que se active el detector, lo que hace que el valor del file sea null .
La forma más fácil es hacer las operaciones necesarias para o con su archivo dentro del oyente, o llamar a un método para hacer esto desde su oyente.
Si esto no es posible, puede crear una variable global para almacenar su archivo, pero deberá esperar a que se llene antes de poder usarlo.
Esta página puede arrojar algo de luz sobre su problema: ¿Cómo acceder al valor de la variable fuera del método addEventListner?