图片变身，Base64登场：FileReader助你实现图片转码与上传预览

2023-10-23 11:08:14

解锁图片转码的奥秘：探索 FileReader 的强大功能

踏上图片转码的征途，FileReader 是你不可或缺的利器。它就像一把锋利的宝剑，帮助你将图片数据劈砍成易于处理的 Base64 格式。在这篇文章中，我们将深入探讨 FileReader 的工作原理，并提供一步步的指南，助你轻松掌握图片转码的技术。

庖丁解牛：拆解 FileReader 的工作流程

获取图片文件： 首先，我们需要像厨师挑选食材一样，从本地文件系统中选择要转码的图片文件。这可以通过 HTML5 的 <input> 元素来实现。
创建 FileReader 对象： 接下来，创建一个 FileReader 对象，它将扮演厨师的角色，负责将图片文件切块处理。
监听 FileReader 的盛宴： FileReader 提供了 load 事件，就像厨师准备好了盛宴。当图片文件读取完成后，会触发该事件，通知我们 Base64 格式的图片数据已经准备好享用。
品尝 Base64 盛宴： 在 load 事件的处理函数中，我们可以获取到图片的 Base64 格式数据。这些数据就像香气扑鼻的菜肴，可以用图片元素的 src 属性进行品鉴，实现图片的上传预览。

代码示例：点亮创意，照亮征途

现在，让我们用代码点亮图片转码的征途：

// 获取图片文件
const inputElement = document.querySelector('input[type=file]');

// 创建 FileReader 对象
const reader = new FileReader();

// 监听 FileReader 的 load 事件
reader.addEventListener('load', () => {
  // 获取图片的 Base64 格式数据
  const base64Data = reader.result;

  // 将 Base64 数据赋值给图片元素的 src 属性
  const imageElement = document.querySelector('img');
  imageElement.src = base64Data;
});

// 当用户选择图片文件时，触发 FileReader 读取文件
inputElement.addEventListener('change', () => {
  // 获取选中的图片文件
  const file = inputElement.files[0];

  // 读取选中的图片文件
  reader.readAsDataURL(file);
});