我得到檔案串列并想要制作 json 陣列
[
{"name":"IDCard001.jpg","base64":"data:image/jpeg;base64,/9j/4AA.."},
{"name":"IDCard002.jpg","base64":"data:image/jpeg;base64,/9j/4AA.."},
]
我的代碼：
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),
};
});
}
我不能將串列用作簡單陣列。我如何？
uj5u.com熱心網友回復：
該map()方法使用函式的回傳值，因為它是見 MDN 中的 map()。
該變數list將包含一個 Promises 串列，而不是預期的物件。
您應該使用await Promise.all() MDN 中的 See Promise.all()包裝地圖，并使函式異步以具有物件陣列。
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;
}
uj5u.com熱心網友回復：
很難確定，但我認為您的問題是您正在地圖中執行異步操作，因此您需要確保承諾得到解決。我認為這將解決您的問題。
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)
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/419263.html
標籤：