题库/HTML / CSS/题目详解
专题深化约 2 分钟阅读

图片上传前怎样预览？Object URL、Data URL 如何释放和控制？

先理解原理和示例，再练习完整口述与追问。

回答要点

File/Blob；createObjectURL 与 revokeObjectURL；FileReader Data URL；类型、尺寸与解码；前端检查不是安全边界。

原理拆解

用户选择文件后可得到 File，创建 Object URL 让浏览器引用该 Blob，无需把整个内容转成 Base64。Data URL 是带编码文本的数据，方便某些小型内嵌场景，但增加体积与内存。预览 URL 有生命周期，替换、取消或组件卸载时应释放，避免反复选择大图后一直保留。

示例与推演

js
function previewFile(file, image) {
  const url = URL.createObjectURL(file)
  image.src = url
  return () => {
    image.removeAttribute('src')
    URL.revokeObjectURL(url)
  }
}

调用方在更换图片或卸载时调用返回的清理函数，同时处理 load/error、大小和维度。多个预览对象分别维护 URL，不能只释放最后一张。

易错点

过早 revoke 可能影响后续读取或保存行为；accept 只是选择提示，文件内容和服务端安全校验仍必需。

参考回答可直接练习口述

本地预览通常用 Object URL，按组件生命周期释放；小型编码场景再考虑 Data URL。预览处理加载失败和尺寸，上传后端独立验证类型、大小与权限，不信任文件扩展名。