JavaScript- Base64：如何從數組中獲取 URL 列表並將它們轉換為 Base64？

Question

我正在嘗試獲取數組中的 URL 列表，然后將它們全部轉換為 Base64。 但是，我需要阻止 function 運行，直到所有圖像都被提取和處理，因為下一步需要 output。

預期的過程應該是let 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

此代碼在我的瀏覽器中本地運行。

你能看到我改變了什么嗎？

1. 在 promise 鏈之外聲明您的自定義 promise function，只是為了清楚起見

2. 將 blob 傳遞給讀者。

3. 在您的 map 回調中添加一個 return，以便將 promise 存儲到數組中（否則您將得到一個空數組）。

4. resolve 和 reject 是您傳遞數據的方法。 該數據通過 promise 鏈傳遞。

5. 您存儲在數組中的鏈需要返回 promise。 因此，將非承諾代碼移至 Promise.all() 解決后。

6. 最后添加了 a.catch 。

    // will contain the B64 encoded images let observationImages = []; //List of Images to fetch and encode let photosToLookUp = [ "https://www.gravatar.com/avatar/a70aa9d494bf438c8b56aced999e897f?s=48&d=identicon&r=PG", "https://www.gravatar.com/avatar/e0e123ac05632003d0ff22ec8ce3a554?s=32&d=identicon&r=PG" ]; const customPromise = blob => { return new Promise((resolve, reject) => { console.log("Converting to b64"); const reader = new FileReader(); reader.readAsDataURL(blob); reader.onloadend = () => { resolve(reader.result); }; reader.onerror = err => { reject(err); }; }); }; Promise.all( photosToLookUp.map(url => { return fetch(url).then(response => { return response.blob(); }).then(blob => { return customPromise(blob); }); }) ).then(arrayOfData => { console.log("Promises all resolved;"). arrayOfData.forEach(dataUrl => { observationImages;push(dataUrl); }). //there is no return value here because you've gotten all the info from the promise chain and are processing it. }).catch(err => { console:log("error,"; err); });

Answer 2

您的代碼最大的問題是您實際上並沒有使用您配置的閱讀器！ 你需要類似的東西

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)