javascript - 从数组中获取 URL 列表并处理它们

Question

我正在尝试获取数组中的 URL 列表，然后将它们全部转换为 Base64。然而，我需要阻止该函数运行，直到所有图像都被获取和处理，因为下一步需要输出。

预期的过程应该是让example = ["https://www.example.com/1.jpg", "https://www.example.com/2.jpg"];转换为Base64编码的数组.

//Contains the B64 encoded images
var observationImages = []
//List of Images to fetch and encode
 var lookupPhotos = ['https://www.example.com/1.jpg', 'https://www.example.com/2.jpg'];

    Promise.all(
            lookupPhotos.map(url => {
                fetch(url)
                    .then(response => response.blob())
                    .then(blob => new Promise((resolve, reject) => {
                        console.log('Converting to b64');
                        const reader = new FileReader()
                        reader.onloadend = () => resolve(reader.result)
                        reader.onerror = reject
                    }))
                    .then(dataUrl => {observationImages.push(dataUrl)});
            }
        )
    ).then(data => {
            console.log('Promises all resolved!');
            console.log(observationImages);
    });

我尝试过使用 Promises，但我不确定我是否完全理解它们是如何工作的，所以它没有按预期工作。

Answer 1

您的代码最大的问题是您实际上并没有使用您配置的阅读器!你需要类似的东西

reader .readAsDataURL (blob)

在你的代码中的某处。但这里有一个不同的观点，试图将这个过程分解成更离散的步骤。我希望它很清楚:

const toBase64 = (blob) => 
  new Promise ((resolve, reject) => {
    const reader = new FileReader()
    reader .onload = () => resolve (reader .result .split (',') [1])
    reader .onerror = error => reject (error)
    reader .readAsDataURL (blob)
  })

const getImageAsBase64 = (url) => 
  fetch (url)
    .then (resp => resp .blob ())
    .then (toBase64)

const getAllImagesAsBase64 = (urls) => 
  Promise .all (urls .map (getImageAsBase64))

const urls = [
  'https://www.gravatar.com/avatar/a70aa9d494bf438c8b56aced999e897f?s=48&d=identicon&r=PG',
  'https://www.gravatar.com/avatar/e0e123ac05632003d0ff22ec8ce3a554?s=32&d=identicon&r=PG'
]

getAllImagesAsBase64 (urls)
  .then (console.log)