js图片预览的两种实现方式

URL.createObjectURL()

• 用法

const file = e.target.files
// 获取文件路径
const url = URL.createObjectURL(file[0])

这个方法可以得到本地内存容器的URL地址，存储的是blob。其生命周期和程序绑定，随着程序关闭，内存自动释放。

FileReader.readAsDataURL()

• 用法

const file = e.target.files
// 创建FileReader实例
const reader = new FileReader()
// 调用readAsDataURL函数读取文件内容
reader.readAsDataURL(file[0])
// 监听onload事件，读取完成触发回调函数
reader.addEventListener("load", function(){
// 获取到base64字符串
this.result
}

该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URL，比blob url更消耗内存，但是不用的时候会通过js垃圾回收机制释放。

区别

1、获取到的类型不同

• URL.createObjectURL(文件对象) 获取到的是当前文件的一个内存URL
• FileReader.readAsDataURL(文件对象)获取到的是一段data:base64的字符串

2、执行机制不同

• createObjectURL是同步执行
• FileReader.readAsDataURL是异步执行