在 JavaScript 中将本地 URL 转换为 Base64 - TypeScript

在 TypeScript 中，你可以使用以下方法将本地 URL 转换为 Base64 格式。

方法一：使用 XMLHttpRequest

async function urlToBase64(url: string): Promise<string> {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.onload = function () {
      const reader = new FileReader();
      reader.onloadend = function () {
        resolve(reader.result as string);
      };
      reader.onerror = reject;
      reader.readAsDataURL(xhr.response);
    };
    xhr.onerror = reject;
    xhr.open("GET", url);
    xhr.responseType = "blob";
    xhr.send();
  });
}

// 示例用法
const imageUrl = "https://example.com/image.png";
urlToBase64(imageUrl)
  .then((base64String) => {
    console.log(base64String);
  })
  .catch((error) => {
    console.error(error);
  });

方法二：使用 fetch

async function urlToBase64(url: string): Promise<string> {
  const response = await fetch(url);
  const blob = await response.blob();
  const base64String = await new Promise<string>((resolve) => {
    const reader = new FileReader();
    reader.onloadend = () => resolve(reader.result as string);
    reader.readAsDataURL(blob);
  });
  return base64String;
}

// 示例用法
const imageUrl = "https://example.com/image.png";
urlToBase64(imageUrl)
  .then((base64String) => {
    console.log(base64String);
  })
  .catch((error) => {
    console.error(error);
  });

以上两种方法都是通过发送 HTTP 请求来获取图片文件，然后通过 FileReader 将文件内容转换为 Base64 字符串。方法一使用 XMLHttpRequest，而方法二使用了更简洁的 fetch。

请确保在使用以上方法时处理好异步操作和错误处理。使用 Promise 进行异步操作，能够更好地处理和追踪异步任务状态。

希望对你有所帮助！