React.js Vista previa de una imagen con un archivo de tipo de entrada
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
Deberá usar un FileReader
objeto 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 async
funció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" />