读取本地图片转Base64

前端读取用户本地文件并转换为Base64编码的实现方案，以下是完整可直接运行的代码（适配现代浏览器），包含核心逻辑、注释和注意事项：

一、核心实现代码（最常用：用户选择文件转Base64）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>本地文件转Base64</title>
</head>
<body>
  <!-- 文件选择框 -->
  <input type="file" id="fileInput" accept="*/*">
  <!-- 显示Base64结果（可选） -->
  <div style="margin-top: 20px;">
    <h4>Base64结果：</h4>
    <textarea id="base64Result" rows="10" cols="80"></textarea>
  </div>

  <script>
    // 获取DOM元素
    const fileInput = document.getElementById('fileInput');
    const base64Result = document.getElementById('base64Result');

    // 监听文件选择事件
    fileInput.addEventListener('change', function (e) {
      // 获取选中的文件（第一个文件）
      const file = e.target.files[0];
      if (!file) return; // 未选择文件则返回

      // 1. 创建FileReader实例（核心API）
      const reader = new FileReader();

      // 2. 监听读取完成事件
      reader.onload = function (event) {
        // event.target.result 就是文件的Base64编码（包含前缀，如data:image/png;base64,xxx）
        const base64Str = event.target.result;
        // 显示结果
        base64Result.value = base64Str;
        console.log('Base64编码：', base64Str);
        
        // 可选：去除Base64前缀（仅保留编码部分）
        const pureBase64 = base64Str.split(',')[1];
        console.log('纯Base64编码（无前缀）：', pureBase64);
      };

      // 3. 监听读取错误
      reader.onerror = function (error) {
        console.error('文件读取失败：', error);
        alert('文件读取失败，请重试！');
      };

      // 4. 开始读取文件为Base64（核心方法）
      reader.readAsDataURL(file);
    });
  </script>
</body>
</html>

二、关键API说明

API/方法 作用
input[type="file"] 让用户选择本地文件，files 属性获取选中的文件列表
FileReader 前端读取本地文件的核心对象，支持多种读取方式
reader.readAsDataURL(file) 将文件读取为 Base64 编码的 DataURL（包含文件类型前缀）
reader.onload 文件读取成功后的回调，event.target.result 为 Base64 结果
reader.onerror 文件读取失败的回调（如文件损坏、权限问题）

三、进阶场景：指定文件类型 + 大小限制

如果需要限制仅读取图片/文档，或限制文件大小，可修改代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
fileInput.addEventListener('change', function (e) {
  const file = e.target.files[0];
  if (!file) return;

  // 1. 限制文件类型（仅允许图片）
  const allowTypes = ['image/jpeg', 'image/png', 'image/gif'];
  if (!allowTypes.includes(file.type)) {
    alert('仅支持JPG/PNG/GIF图片！');
    return;
  }

  // 2. 限制文件大小（如最大2MB）
  const maxSize = 2 * 1024 * 1024; // 2MB
  if (file.size > maxSize) {
    alert('文件大小不能超过2MB！');
    return;
  }

  // 后续读取逻辑（同上）
  const reader = new FileReader();
  reader.onload = function (event) {
    base64Result.value = event.target.result;
  };
  reader.readAsDataURL(file);
});

四、注意事项

  1. 兼容性：FileReader 兼容所有现代浏览器（Chrome/Firefox/Safari/Edge），无需兼容处理；
  2. Base64 前缀：readAsDataURL 返回的结果包含 data:文件类型;base64, 前缀，如需纯编码可通过 split(',')[1] 截取；
  3. 文件大小：大文件（如100MB+）转Base64会占用大量内存，建议仅对小文件（如图片、小文档）使用；
  4. 安全限制：前端无法主动读取本地文件，必须由用户通过 <input> 手动选择（浏览器安全策略）；
  5. 常见用途：Base64可用于图片预览、小文件上传（后端解码）、本地数据缓存等。

总结

关键点回顾

  1. 核心流程：input选择文件 → FileReader 实例化 → readAsDataURL 读取 → onload 获取Base64；
  2. 可通过 file.type/file.size 限制文件类型和大小；
  3. Base64结果默认带前缀，按需截取纯编码部分；
  4. 前端仅能读取用户主动选择的文件，无法静默读取本地文件（安全限制）。

直接复制核心代码即可运行，替换文件类型/大小限制逻辑可适配不同业务场景。

学无止境
读取本地图片转Base64
https://cszy.top/2017-11-24 读取本地图片转base64/
作者
csorz
发布于
2017年11月24日
许可协议