Quiero obtener los datos de un archivo de entrada en reaccionar. He creado una clase con los datos como estado. La idea es que los datos se actualicen cada vez que cambie la entrada. Mientras esto sucede, una imagen debería cargarse con los datos de entrada.
El siguiente código es lo que he creado, pero no funciona.
class ImagePicker extends React.Component { constructor(props){ super(props); this.state = { data: null } } handleDataChange = e => { this.setState({ data: e.target.value }) } render(){ return( <div> <input type='file' onChange={this.handleDataChange} /> <img src={this.state.data}></img> </div> ) } }No sé cuál es el problema, ¿podrías ayudarme?
Puedes usar URL.createObjectURL
handleDataChange = event => { if (event.target.files && event.target.files[0]) { this.setState({ data: URL.createObjectURL(event.target.files[0]) }); } }Esto resuelve el problema:
class ImagePicker extends React.Component { constructor(props){ super(props) this.state = { file: null } this.handleChange = this.handleChange.bind(this) } handleChange(event) { this.setState({ file: URL.createObjectURL(event.target.files[0]) }) } render() { return ( <div> <input type="file" onChange={this.handleChange}/> <img src={this.state.file}/> </div> ); } }Al elegir un archivo, elige una URL para ese archivo. Puede convertir esta URL en un archivo png usando URL.createObjectURL().