将图像 URL 作为 blob 保存到 SQLite 数据库

Question

我现在被这个问题困扰了几天。

我制作了一个 React 本机应用程序，它从服务器检索所有餐厅菜肴和图像。现在我的客户希望我为其添加离线模式。

我的想法是把所有的数据都存储在手机上，SQLite数据库中，使用本地数据库查看所有的Data，包括所有的图片。每次用户启动应用程序时，它都会刷新手机上的数据，因此它也会始终更新。

但是我不知道如何将图像保存为 web URL 中的 blob。

我知道如何将图像转换为 Blob，以及如何将 Blob 转换为 base64，但是当我调用该函数时，我没有得到正确的值。如果我启用控制台日志并检查函数的结果，它会打印它应该打印的所有内容。

但是当我得到返回值时，它是垃圾或空的，这取决于是否使用 await 和 async。

这是一个将 URL 图像转换为 blob，然后再转换为 base64 的简单函数。 Console.log 很好，但返回并没有得到结果。

export const convertImageToBase64 = async (imgUrl) => {
  const fr = new FileReader();
  await fetch(imgUrl).then((response) => {
    response.blob().then((blob) => {
      fr.readAsDataURL(blob);
      fr.onload = () => {
        console.log(fr.result);
      };
    });
  });
};

有人可以帮忙吗？

我需要一个解决方案来获取转换后的数据并将其放入数据库中。

Answer 1

使用 XMLHttpRequest API 而不是 Fetch API，如下所示：

function blobToBase64(blob) {
  return new Promise((resolve, _) => {
    const reader = new FileReader();
    reader.onloadend = () => resolve(reader.result);
   return  reader.readAsDataURL(blob);
  });
}


const convertImageToBase64 = async (imgUrl) => {


  const blob = await new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.onload = function () {
      resolve(xhr.response);
    };
    xhr.onerror = function (e) {
      reject(new TypeError("Network request failed"));
    };
    xhr.responseType = "blob";
    xhr.open("GET", imgUrl, true);
    xhr.send(null);
  });
  

  const base64 =  await blobToBase64(blob)

  console.log({base64, blob})
  
};


convertImageToBase64("https://randomuser.me/api/portraits/men/4.jpg")