第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會(huì)有你想問的

在 Javascript 中，readFile 方法返回一個(gè)空數(shù)組，但是當(dāng)控制臺(tái)日志數(shù)據(jù)顯示在

在 Javascript 中，readFile 方法返回一個(gè)空數(shù)組，但是當(dāng)控制臺(tái)日志數(shù)據(jù)顯示在

慕蓋茨4494581 2023-06-09 15:47:26
我想將所有圖像添加到一個(gè)數(shù)組中。但是當(dāng)我下面的代碼返回一個(gè)空數(shù)組時(shí)。然而，當(dāng)我控制臺(tái)日志時(shí)，與圖像有關(guān)的數(shù)據(jù)顯示如下。誰能給我一個(gè)解決方案這是我的代碼??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貢獻(xiàn)1765條經(jīng)驗(yàn) 獲得超5個(gè)贊

images被推送到您的數(shù)組，這onload意味著它是異步發(fā)生的。在圖像返回到瀏覽器之前，您不能對圖像進(jìn)行操作。處理此問題的最佳方法是返回readImages一個(gè)Promise.all()，并加載每個(gè)單獨(dú)的圖像，因?yàn)樗悄扑偷綌?shù)組的自己的 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);


注意：這實(shí)際上是原始代碼，讓您了解基礎(chǔ)知識，并且不會(huì)檢查您的最終結(jié)果集是否有錯(cuò)誤。它還使用對象解構(gòu)，這在舊瀏覽器中不起作用。


查看完整回答
反對 回復(fù) 2023-06-09
  • 1 回答
  • 0 關(guān)注
  • 183 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號