Esta es la respuesta más acertada que te podemos aportar, sin embargo estúdiala detenidamente y analiza si es compatible a tu trabajo.
se registra como null en la consola porque el estado no ha cambiado en el momento de imprimirlo. Cuando seleccione el archivo por segunda vez, el string la consola que inició sesión en realidad pertenece al archivo anterior que seleccionó. El estado aún no ha cambiado al segundo archivo que seleccione.
Refiriéndose al documento de React:
setState() no muta inmediatamente this.state sino que crea una transición de estado pendiente. Acceder a this.state después de llamar a este método puede potencialmente devolver el valor existente. No hay garantía de funcionamiento síncrono de las llamadas a setState y las llamadas pueden agruparse por lotes para mejorar el rendimiento.
Si desea imprimir el estado correcto, puede registrarlo en la función de devolución de llamada:
self.setState(
image: upload.target.result
, function()
console.log(self.state.image);
);
Esto también funcionará ya que el estado debe cambiarse después del retraso de 1 segundo:
reader.onload = function(upload)
self.setState(
image: upload.target.result
);
;
reader.readAsDataURL(file);
setTimeout(function()
console.log(self.state.image);
, 1000);
prueba este
Campo de entrada
this.handleFileRead(e)
size="small"
variant="standard"
/>
Leer archivo desde la computadora
handleFileRead = async (event) =>
const file = event.target.files[0]
const base64 = await this.convertBase64(file)
console.log(base64)
Función de convertidor Base64
convertBase64 = (file) =>
return new Promise((resolve, reject) =>
const fileReader = new FileReader();
fileReader.readAsDataURL(file)
fileReader.onload = () =>
resolve(fileReader.result);
fileReader.onerror = (error) =>
reject(error);
)
Comentarios y puntuaciones
Ten en cuenta comunicar este escrito si si solucionó tu problema.