¡Quiero crear un cargador de image basado en base64 y quiero obtener resultados como una array , pero me quedé empty! matriz, sé que tal vez sea un problema asynchronous , pero no sé cómo usar async, await en el map , ¿alguna idea?
const [array, setArray] = useState([]); const fileBase64 = (img) => { let result = [...img]; setUrlImage(img); result && result.map(function (img){ let fileReader = new FileReader(); fileReader.readAsDataURL(img); fileReader.onloadend = async () => { let res = await fileReader.result; setArray([...array, res]) }; }) console.log(array) } const handleImage = (e) => { let image = [...e.target.files]; fileBase64(image); } <input type="file" multiple={true} onChange={handleImage}/>Debido a esta naturaleza asynchronous , el estado se establece, es decir, se push antes de que las urls de datos se establezcan en la matriz.
Y esa es la razón por la que su array regresa vacía.
Para solucionarlo, puede usar create Promise , que se resuelve después del evento de carga de cada archivo. Y use Promise.all , que se resolvería después de que cada Promise se haya resuelto y luego use setArray :
fileBase64 = (img) => { return new Promise((resolve, reject) => { let fileReader = new FileReader(); fileReader.onerror = reject fileReader.onload = function () { resolve(fileReader.result) } fileReader.readAsDataURL(img) }) } handleImage = (e) => { let image = e.target.files; Promise.all(Array.from(image).map(this.readAsDataURL)) .then((urls) => { setArray(urls) }) .catch((error) => { console.error(error) }) }