1 回答

TA貢獻1815條經驗 獲得超13個贊
確定找到了解決方案,所以我會分享它。將整個列表發送到 util 函數并在那里進行處理。在 util func 中,我將更新一個狀態,該狀態將是可選的加載文件。只有在檢查之后,我才會在組件內部設置“真實”圖像列表——這將在 util 之外發生:
useEffect(()=>{
uploaded.map((obj, index) => {
if (isValid) {
setImagesList((old) => [...old, obj]);
}
},[uploaded])
-----------------------------------
util :
export default function loadFiles(files, setUploaded) {
const reader = new FileReader();
let arr = [];
function readFile(index) {
if (index >= files.length || index > 5) {
setUploaded(arr);
return;
}
const file = files[index];
reader.onload = function (e) {
let image = new Image();
image.src = e.target.result;
image.onload = function () {
arr.push({
key: `${Date.now()}-${file.name}-${index}`,
name: file.name,
arr: [e.target.result],
imageOriginalWidth: image?.width,
imageOriginalHeight: image?.height,
});
readFile(index + 1);
};
};
reader.readAsDataURL(file);
}
readFile(0);
}
添加回答
舉報