在 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) =>&nbsp; new Promise((resolve, reject) => {&nbsp; &nbsp; const fileReader = new FileReader();&nbsp; &nbsp; fileReader.onload = ({ target: { result } }) => resolve(result);&nbsp; &nbsp; fileReader.onerror = () => reject(fileReader.error);&nbsp; &nbsp; fileReader.readAsDataURL(file);&nbsp; });const readImages = ({ files }) => {&nbsp; if (!files) {&nbsp; &nbsp; return Promise.reject('No files provided');&nbsp; }&nbsp; const imgPromises = [];&nbsp; files.forEach((file) => imgPromises.push(readImage(file)));&nbsp; return Promise.all(imgPromises);};// The input 'event' target will contain the value of the fieldconst onInput = ({ target: { value } }) => {&nbsp; readImages(value).then((imgArray) => {&nbsp; &nbsp; const preview = document.getElementById('previewImages');&nbsp; &nbsp; imgArray.forEach((img, index) => {&nbsp; &nbsp; &nbsp; preview.innerHTML += `<img src="${img}" alt="image_${index}" />`;&nbsp; &nbsp; });&nbsp; });};document.getElementById('uploadImages').addEventListener('input', onInput);注意：这实际上是原始代码，让您了解基础知识，并且不会检查您的最终结果集是否有错误。它还使用对象解构，这在旧浏览器中不起作用。