Quiero seleccionar varias imágenes de una entrada y leerlas con el lector de archivos, y si lo dejo así, me da una imagen
const [image , setImage] = useState(''); const [imageSelected , setImageSelected] = useState(null); const onImageChange = event => { const reader = new FileReader(); reader.onload = () => { if(reader.readyState === 2){ setImageSelected(reader.result) console.log(reader.result) } } setImage(event.target.files[0]); reader.readAsDataURL(event.target.files[0]) console.log(image) }HTML
<label htmlFor="image" className = "col-span-3 "> { !imageSelected ? <PhotoCameraIcon fontSize="120" className ="border rounded p-2 h-24 text-8xl text-gray-600 cursor-pointer" /> : ( <img src={imageSelected} alt="" className = "h-44" /> ) } <input hidden multiple onChange={onImageChange} type="file" name="image" id="image" /> </label>import "./styles.css"; import React, {Component} from 'react'; export default class App extends Component { constructor (props){ super(props); this.state={ images: null } } readFileContents = async (file) => { return new Promise((resolve, reject) => { let fileReader = new FileReader(); fileReader.onload = () => { resolve(fileReader.result); }; fileReader.onerror = reject; fileReader.readAsDataURL(file); }); } readAllFiles = async (AllFiles) => { const results = await Promise.all(AllFiles.map(async (file) => { const fileContents = await this.readFileContents(file); return fileContents; //let a = URL.createObjectURL(fileContents); //return a; })); console.log(results, 'resutls'); return results; } handleUpload = (e) => { let AllFiles = []; [...e.target.files].map(file => AllFiles.push(file)); this.readAllFiles(AllFiles).then(result => { let allFileContents = []; result.map(res =>{ allFileContents.push(res); }) this.setState({images: allFileContents}); }).catch(err => { alert(err); }); } render = () => { return (<div> <input type="file" multiple onChange={(e) => this.handleUpload(e)}/> {this.state.images && this.state.images.map((img, idx)=>{ return <img width={100} height={50} src={img} alt={idx} key={idx} /> }) } </div> ) } }