readAsDataURL 和 createObjectURL
readAsDataURL 和 createObjectURL
URL.createObjectURL()
URL.createObjectURL()
静态方法会创建一个 DOMString,其中包含一个表示参数中给出的对象的 URL。 这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的 URL 对象表示指定的 File 对象或 Blob 对象。 简单说经过这个方法的处理后会生成一个临时的链接,然后直接赋值给 src 就行~
使用方式:
bjectURL =
URL.createObjectURL(blob)
;
示例:
<input
fileInput="grFileUploader"
type="file" style="display: none"
(change)="fileChange(idx, fileInput.files)"
accept=".png,.jpeg,.jpg">
<img [src] ="imgsrc"/>
imgsrc:string="";
fileChange(index: number, files?: FileList): void {
const file = files && files.item(0);
if (file) {2 this. imgsrc= URL.createObjectURL(file)}
FileReader.readAsDataURL()
FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容, 使用 File 或 Blob 对象指定要读取的文件或数据。 异步读取指定的 Blob 中的内容,一旦完成,会返回一个 data: URL 格式的字符串以表示所读取文件的内容。
使用方式:
fileStr =
FileReader.readAsDataURL(blob)
示例:(同上)
区别
(1)返回值
FileReader.readAsDataURL(blob)
可以得到一段base64
的字符串 URL.createObjectURL(blob)
得到的是当前文件的一个内存 url
(2)内存使用
FileReader.readAsDataURL(blob)
得到一段超长的 base64 的字符串 URL.createObjectURL(blob)
得到的是一个 url 地址
(3)内存清理
FileReader.readAsDataURL(blob)
依照 js 垃圾回收机制自动从内存中清理 URL.createObjectURL(blob)
存在于当前 document 内,清除方式只有 upload()事件 或者 revokeObjectURL()手动清除
(4)执行方式
FileReader.readAsDataURL(blob)
通过回调的方式 f 返回,异步执行; URL.createObjectURL(blob)
直接返回,同步执行;
(5)多个文件
`FileReader.readAsDataURL(blob)`同时处理多个文件时,需要一个文件对应一个FileReader对象;
`URL.createObjectURL(blob)` 依次返回,没有影响;
总结 URL.createObjectURL(blob)
得到本地内存容器的 URL 地址,方便预览,多次使用需要注意手动释放内存的问题,性能优秀。 **FileReader.readAsDataURL(blob)
**胜在直接转为 base64 格式,可以直接用于业务,无需二次转换格式。