在 Javascript 中，readFile 方法返回一个空数组，但是当控制台日志数据显示在

Question

我想将所有图像添加到一个数组中。但是当我下面的代码返回一个空数组时。然而，当我控制台日志时，与图像有关的数据显示如下。谁能给我一个解决方案这是我的代码👇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}"/>`      }    })

Answer 1

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);

注意：这实际上是原始代码，让您了解基础知识，并且不会检查您的最终结果集是否有错误。它还使用对象解构，这在旧浏览器中不起作用。