前端图片展示的两种方式blob和base64

zaizaizhao
9,340 阅读4分钟

抛出问题1：如何实现文件的上传

使用html的input元素可以实现文件的上传

<input
      id="sendImage"
      title="this is imgUpload"
      type="file"
      accept="image/* "
      onchange="imgChange(this)"
    />
type="file"规定该input仅用于上传文件
accept="image/* "规定支持任何图片格式
onchange="imgChange(this)"绑定change事件，监听文件的上传

抛出问题2：页面如何展示图片

  1. 使用blob
  2. 使用base64

1.首先监听上传的图片

FileList对象来自于HTML的files属性，可以通过e.files访问，当上传图片时会触发onchange事件，通过e.files拿到当前上传图片的信息
image.png

function imgChange(e) {
      console.log(e.files);
}

2.处理图片信息

2.1 使用FileReader对象读取文件

const fileReader = new FileReader();
fileReader.readAsDataURL(e.files[0]);
fileReader.addEventListener("load", function () {
	let res = fileReader.result;
	document.querySelector("#img_base_64_show").src = res;
	console.log(res);
});

image.png 监听filereader的load事件，通过filereader.result可以获取图片的base64格式，可以用于页面的图片展示

2.2 使用blobUrl来展示

let file = e.files[0];
      var blob = new Blob([file], { type: file.type });
      var url = URL.createObjectURL(blob);
      console.log(blob, url);
      document.querySelector("#img_show").src = url;

image.png

Blob URL 是通过将 Blob 对象生成一个 URL 来实现展示二进制文件的方式。

Base64 和 Blob URL 展示图片的优缺点

Base64

Base64 是一种将二进制数据编码成 ASCII 字符串的方法。前端中通常使用 Base64 来解决图片、音频等二进制文件无法直接传输的问题。下面是 Base64 的优缺点：

优点：

  • 方便传输：Base64 可以通过 HTTP 协议直接传输，无需额外的请求。
  • 简化操作：使用 Base64 可以避免一些繁琐的操作，如在服务器端对图片进行处理，通过代码上传至 CDN 等步骤。
  • 减轻服务器压力：使用 Base64 可以减轻服务器端的压力，因为传输的是字符串，可以避免频繁读写硬盘。

缺点：

  • 增加体积：Base64 编码会使二进制数据的体积增大约三分之一左右，因此会占用更多网络带宽和浏览器内存。
  • 降低加载速度：相比于直接加载本地或远程图片，Base64 编码的图片需要客户端将其转换成二进制数据，并解码成图片，所以会降低页面的加载速度。
  • 不便于缓存: 因为 Base64 图片是内嵌在 HTML 或 CSS 中的，无法像普通图片那样被浏览器缓存。

Blob URL

Blob URL 是通过将 Blob 对象生成一个 URL 来实现展示二进制文件的方式。下面是 Blob URL 的优缺点：

优点：

  • 较小体积：相比于 Base64 编码的字符串，Blob URL 只有一个字符串地址，因此在大小上会更加小巧。
  • 快速加载：由于只需要加载一条 URL 地址，而不需要额外进行转换操作，因此大大提高了页面的加载速度。
  • 可被浏览器缓存：与常规的图片 Url 相同，Blob URL 的图片可以被客户端浏览器本地缓存，提高用户访问速度。

缺点：

  • 不便传输：Blob URL 生成的 URL 只能在浏览器中使用，无法直接传输给服务器端。
  • 获取困难：获取 Blob 对象并不像获取 Base64 数据那样方便，需要通过 XMLHttpRequest、FileReader 等对象才能得到 Blob 对象。
  • 兼容性问题：Blob URL 在 IE10 及以下版本浏览器不支持，在移动端 iOS 系统上也有兼容性问题。

总的来说，Base64 和 Blob URL 都有各自的优点和缺点，我们在实际开发中需要根据实际情况选择使用哪种方式。如果你需要传输文件到服务器端、需要跨域访问则可以使用 Base64 编码；如果要保证加载速度、可被浏览器缓存，那么建议使用 Blob URL 的方式展示图片。

总结

1.前端展示的话可以使用BlobUrl来做，后端存储的话，可以将base64存放在后端，如Minio中。在拿到数据后，前端转化为BlobUrl进行展示。
2.通过input元素可以实现图片的上传，在一些组件库中，可以隐藏input框，来美化图片上传控件。
3.同样的，上述图片的展示也可以用于pdf的展示，使用HTML<embed>元素将外部内容嵌入文档中的指定位置。

avatar
文章
阅读
粉丝