¡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) }) }