如何把二进制图片转为base64格式

风无雨
620 阅读2分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第7天，点击查看活动详情

1.什么是base64格式

Base64（基底64）是一种基于64个可打印字符来表示二进制数据的表示方法。

image.png

2.为什么要使用base64格式

2.1便于网络传输

  • 对于服务器而言,图片文件转化为base64格式可以把图片当做普通的字符串上传即可
  • 二级制数据转为字符串数据便于网络传输

2.2减少了服务器访问数据

  • 网页中使用base64格式的图片时，不用再请求服务器调用图片资源，减少了服务器访问次数。

2.3进行了一定的加密

  • 进行了编码,不能直接看出原来的内容

3.具体如何把二进制图片转化为base64格式实现预览

3.1操作流程

  • (1)给file表单添加change事件
  • (2)获取用户选择的文件二进制
  • (3)把二进制转化为base64 使用FileReader对象
  • (4)把生成的base64 设置给img标签的src属性

3.2难点如何把二进制图片转化为base64格式

使用JS自带的 FileReader对象

  • FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

以及两个FileReader对象的方法

开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL 格式的 Base64 字符串以表示所读取文件的内容。

处理load 事件。该事件在读取操作完成时触发。

  //1.头像预览
    onFileChange(e) {
      // (1)获取用户选择的对象
      const file = e.target.files[0];
      // (2)使用FileReader对象把url文件转化为base64
      // 创建FileReade对象
      let fd = new FileReader();
      // 读取文件,转化为base64
      fd.readAsDataURL(file);
      // 读取完成回调
      fd.onload = (res) => {
        this.avatar = res.target.result;
      };
    },

注意点:

1.获取图片文件时要e.target.files[0],这是因为files是一个数组,当我们只有一个文件时,取他的第一个元素即可

2.使用FileReader对象三步走

(1)实例化FileReader

(2)使用FileReader的readAsDataURL方法读取文件

(3)使用FileReader的onload方法在读取完后进行操作(此处为把图片的base文件赋给avatar)

  • 其他部分代码

file表单控件:

   <input
          type="file"
          style="display: none"
          accept="image/*"
          ref="iptRef"
          @change="onFileChange"
        />

图片预览部分:

    <!-- 图片，用来展示用户选择的头像 -->
      <img v-if="avatar" :src="avatar" alt="" class="preview" />
      <img v-else src="@/assets/images/avatar.jpg" alt="" class="preview" />

4.总结

  • base64格式可以把图片从二进制数据转化为base64的字符串文本格式,便于传输
  • 但是bsae64格式往往不能用来较大容量的图片传输
  • 我们使用FileReader.readAsDataURL()把二进制数据转为base64格式
avatar
文章
阅读
粉丝