React.js Vista previa de una imagen con un archivo de tipo de entrada

Aug 19 2020

Actualmente estoy tratando de obtener una vista previa de una imagen en una carga de un archivo de imagen. Puedo recibir la imagen y el registro de la consola, sin embargo, no puedo mostrarlo en la etiqueta img.

Esta es la forma en que estoy tratando de renderizarlos:

<input type='file' id="uploadImage" onChange={this.handleImageChange} className="upload-input" />
<label htmlFor="uploadImage" className="upload-image-button">Choose An Image</label>
{this.state.imagePreview[0] ?
  <img src={this.state.imagePreview[0]} alt="" className="image-preview" /> 
  :
  <img alt="" className="image-preview" />
}

Aquí están mi estado y mi método de cambio de control para la entrada:

state = {
  imagePreview: {}
}

handleImageChange = async (e) => {
  console.log(e.target.files)
  await this.setState({ imagePreview: e.target.files })
  console.log(this.state.imagePreview)
}

Aquí están los registros de mi consola para los archivos: ingrese la descripción de la imagen aquí

Respuestas

silencedogood Aug 19 2020 at 00:08

Deberá usar un FileReaderobjeto para obtener los datos base64 y aplicarlos a la fuente de la etiqueta de imagen.

Además, no veo ninguna necesidad de que esto sea una asyncfunción (a menos que, en aras de la brevedad, haya omitido una promesa con la que está trabajando).

Del código que ha presentado, algo como esto debería funcionar:

handleImageChange(event) {

   const file = event.target.files[0];
   const reader = new FileReader();

   reader.onload = function(event) {
     // The file's text will be printed here, if you want to see the base64
     console.log(event.target.result)
     // Set state with base64 data
     this.setState({ imagePreview: e.target.result })
   };

   reader.readAsText(file);
}

Html (o jsx) se vería así:

<img src={this.state.imagePreview} alt="" className="image-preview" />