Obtengo la lista de archivos y quiero hacer una matriz json como
[ {"name":"IDCard001.jpg","base64":"data:image/jpeg;base64,/9j/4AA.."}, {"name":"IDCard002.jpg","base64":"data:image/jpeg;base64,/9j/4AA.."}, ]Mi código:
const getBase64 = (file: File) => { return new Promise((resolve, reject) => { let reader = new FileReader(); reader.onload = () => resolve(reader.result as string); reader.onerror = (error) => reject(error); reader.readAsDataURL(file); }); }; const handleFiles = (files: Array<File>) => { const list = files.map(async (file) => { return { name: file.name, base64: await getBase64(file), }; }); }No puedo usar la lista como una matriz simple. ¿Cómo puedo?
El método map() usa el valor de retorno de la función tal como es Ver map() en MDN .
La list de variables contendrá una lista de Promesas en lugar del objeto previsto.
Debe envolver el mapa con await Promise.all() Ver Promise.all() en MDN y hacer que la función sea asíncrona para tener la matriz de objetos.
const handleFiles = async (files: Array<File>) => { const list = await Promise.all(files.map(async (file) => { return { name: file.name, base64: await getBase64(file), }; })); return list; }Es difícil estar seguro, pero creo que su problema es que está realizando operaciones asincrónicas dentro de un mapa, por lo que debe asegurarse de que se resuelvan las promesas. Creo que esto resolvería tu problema.
const handleFiles = async(files: Array<File>) => { const list = await Promise.all(files.map(async (file) => { return { name: file.name, base64: await getBase64(file), }; })) console.log(list) }