Input[type=file]选择图片后快速预览的方式

URL.createObjectURL()

• 一个静态方法，创建一个 DOMString，返回一个 URL，URL 和 document 绑定，表示指定的 File 对象
• 文档地址：https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL

 

FileReader.readAsDataURL()

• 一个 FileReader 上面的实例方法，读取指定的 File 对象，读取完成的时候触发回调，返回 URL 格式 的字符串（base64）
• 文档地址：https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader/readAsDataURL

 

异同

• 返回值

• • FileReader.readAsDataURL(file) 可以得到一段 base64 的字符串
  • URL.createObjectURL(file)可以得到当前文件的一个内存URL

• 执行机制

• • FileReader.readAsDataURL(file)通过回调的形式返回，异步执行
  • URL.createObjectURL(file)直接返回，同步执行

• 内存清理

• • FileReader.readAsDataURL(file)依照JS垃圾回收机制自动从内存中清理
  • URL.createObjectURL(file)存在于当前doucment内，清除方式只有unload()事件或 revokeObjectURL()手动清除 。

 

总结一下

• URL.createObjectURL(file)得到本地内存容器的URL地址，同步使用，比较方便快捷，多次使用需要 注意手动释放内存的问题，性能优秀。
• FileReader.readAsDataURL(file)胜在直接转为base64格式，可以直接用于业务，无需二次转换格 式

 

代码实现

• URL.createObjectURL(file)

try {
  fileObj.url = URL.createObjectURL(file);
} catch (e) {
  console.error(e);
}

• FileReader.readAsDataURL(file)

const fileReader = new FileReader();
fileReader.readAsDataURL(file);
fileReader.addEventListener('load', () => {
  fileObj.url = fileReader.result as string;
});