已解決430363個問題，去搜搜看，總會有你想問的

在 Javascript 中，readFile 方法返回一個空數組，但是當控制臺日志數據顯示在

首頁猿問在 Javascript...

在 Javascript 中，readFile 方法返回一個空數組，但是當控制臺日志數據顯示在

JavaScript

慕蓋茨4494581 2023-06-09 15:47:26

我想將所有圖像添加到一個數組中。但是當我下面的代碼返回一個空數組時。然而，當我控制臺日志時，與圖像有關的數據顯示如下。誰能給我一個解決方案這是我的代碼??const readImages = uploader => {? ? ? let images = []? ? ? const selectedfiles = uploader.files? ? ? for (let index = 0; index < selectedfiles.length; index++) {? ? ? ? const fileReader = new FileReader()? ? ? ? fileReader.onload = fileLoadedEvent => {? ? ? ? ? images.push(fileLoadedEvent.target.result)? ? ? ? }? ? ? ? fileReader.readAsDataURL(selectedfiles[index])? ? ? }? ? ? return images;? ? }//End of readImages? ? this._qs('#uploadImages').addEventListener('input', () => {? ? ? const images = readImages(this._qs("#uploadImages"))? ? ? console.log(images)? ? ? for (let index = 0; index < images.length; index++) {? ? ? ? this._qs('#previewImages').innerHTML += `<img src="${images[index]}" alt="image-${index}"/>`? ? ? }? ? })

查看完整描述

1 回答

POPMUISE

TA貢獻1765條經驗獲得超5個贊

images被推送到您的數組，這onload意味著它是異步發生的。在圖像返回到瀏覽器之前，您不能對圖像進行操作。處理此問題的最佳方法是返回readImages一個Promise.all()，并加載每個單獨的圖像，因為它是您推送到數組的自己的 Promise Promise.all()。

const readImage = (file) =>

new Promise((resolve, reject) => {

const fileReader = new FileReader();

fileReader.onload = ({ target: { result } }) => resolve(result);

fileReader.onerror = () => reject(fileReader.error);

fileReader.readAsDataURL(file);

});

const readImages = ({ files }) => {

if (!files) {

return Promise.reject('No files provided');

}

const imgPromises = [];

files.forEach((file) => imgPromises.push(readImage(file)));

return Promise.all(imgPromises);

};

// The input 'event' target will contain the value of the field

const onInput = ({ target: { value } }) => {

readImages(value).then((imgArray) => {

const preview = document.getElementById('previewImages');

imgArray.forEach((img, index) => {

preview.innerHTML += `<img src="${img}" alt="image_${index}" />`;

});

};

document.getElementById('uploadImages').addEventListener('input', onInput);

注意：這實際上是原始代碼，讓您了解基礎知識，并且不會檢查您的最終結果集是否有錯誤。它還使用對象解構，這在舊瀏覽器中不起作用。

反對回復 2023-06-09

1 回答
0 關注
185 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

在 Javascript 中，readFile 方法返回一個空數組，但是當控制臺日志數據顯示在

在 Javascript 中，readFile 方法返回一個空數組，但是當控制臺日志數據顯示在

1 回答

添加回答

在 Javascript 中，readFile 方法返回一個空數組，但是當控制臺日志數據顯示在

在 Javascript 中，readFile 方法返回一個空數組，但是當控制臺日志數據顯示在