如何通过FileDialog选中的文件内容渲染HTML img标签？

架构老林

2026-8-7

在浏览器中通过显示FileDialog选中图片的解决方案

为什么不能直接用本地文件路径

浏览器的安全机制禁止直接使用file://协议的本地路径作为<img>的src，这是为了防止网页随意访问用户本地文件系统，所以必须通过文件内容相关的方式渲染图片。

解决FileReader.readAsDataURL的类型错误问题

你遇到的TypeScript报错是因为FileReader.result的类型可能为string | ArrayBuffer | null，而setAttribute('src')要求传入字符串类型。只需在使用前做类型校验即可：

const file = document.getElementById('file-input').files[0];
const img = document.getElementById('img-userPhoto');
if (file && img) {
  const reader = new FileReader();
  reader.onload = function(e) {
    // 确保result是字符串类型再赋值
    if (typeof e.target.result === 'string') {
      img.setAttribute('src', e.target.result);
    }
  };
  reader.readAsDataURL(file);
}

更高效的替代方案：URL.createObjectURL

除了FileReader，还可以使用URL.createObjectURL()生成临时的Blob URL，这个方法不需要读取整个文件内容，性能更优：

const file = document.getElementById('file-input').files[0];
const img = document.getElementById('img-userPhoto');
if (file && img) {
  const blobUrl = URL.createObjectURL(file);
  img.src = blobUrl;
  // 图片加载完成后释放临时URL，避免内存泄漏
  img.onload = function() {
    URL.revokeObjectURL(blobUrl);
  };
}