data url 和 base64

data url

data url 是一种特殊的 URL（统一资源定位符）格式，无需通过网络请求获取资源，而是直接将资源数据嵌入 URL 中。其格式为：data:[<mediatype>][;base64],<data>。其中，MIME 类型用于表示资源类型（如、、等），编码方式可选（如不指定则为纯文本，指定则为 base64 编码数据）。

示例：在标签中使用 dataurl 嵌入 JS 代码，浏览器会直接执行该代码，无需网络请求。

<script src="data:application/javascript,alert(123)"></script>

base64

base64 是一种编码方式，可将任意数据（文本或二进制）转换为纯文本数据。其核心作用是解决二进制数据无法直接在文本环境中表示的问题（如在 URL、HTML 等文本场景中嵌入二进制资源）。

• 编码 / 解码函数：浏览器提供（编码）和（解码）方法。
• 特点：非加密方式，可逆；由 64 个字符（数字、大小写字母、+、/）组成，因此得名 base64。

<script>
  const base64 = btoa("alert(123)");
  const text = atob(base64);
  console.log(base64, text);
</script>

data url 与 base64 的关系

dataurl 支持嵌入 base64 编码后的数据。当资源为二进制（如图片）时，需先通过 base64 编码转为文本，再嵌入 dataurl 中。例如，将 JS 代码通过编码后，data url 格式为，浏览器可正确解析并执行。

<script src="data:application/javascript;base64,YWxlcnQoMTIzKQ=="></script>

应用场景：图片预览优化

传统图片预览需经历 “上传文件到服务器→服务器返回 URL→客户端请求 URL 显示图片” 两步网络请求，存在延迟。使用 dataurl+base64 可优化流程：

1. 用户选择图片后，通过本地读取文件，调用方法将二进制图片转换为 dataurl（自动包含 base64 编码数据）。
2. 直接将 dataurl 设置为的属性，无需网络请求即可显示预览图，提升用户体验。
3. 后续可异步将图片上传至服务器，不影响预览流程。

代码思路：通过的事件获取文件对象，使用读取为 dataurl，赋值给图片元素的。

<div>
  <input type="file" />
  <img src="" id="preview" alt="" width="100">
</div>
<script>
  const inp = document.querySelector("input[type='file']");
  inp.addEventListener("change", (e) => {
    const file = e.target.files[0];
    const reader = new FileReader();
    reader.onload = function (event) {
      const content = event.target.result;
      console.log(content);
      preview.src = content;
    };
    reader.readAsDataURL(file);
  });
</script>