JavaScript中URL.createObjectURL()与FileReader的对比及用法详解

URL.createObjectURL() 方法概述

URL.createObjectURL() 是一个静态方法，用于生成一个表示参数中指定对象的 DOMString 类型 URL。该 URL 的生命周期与创建它的窗口中的 document 紧密绑定，新生成的 URL 对象指向特定的 File 或 Blob 对象。

URL.createObjectURL(blob) 与 FileReader.readAsDataURL(file) 功能相似，以下总结了一些个人理解，如有不当之处，欢迎指正。

与 FileReader 的主要区别

主要区别

• 使用 FileReader.readAsDataURL(file) 可以获取一段以 data:base64 开头的字符串。
• 使用 URL.createObjectURL(blob) 可以获取当前文件在内存中的一个 URL 引用。

执行时机：

• createObjectURL 是同步执行，结果立即返回。
• FileReader.readAsDataURL 是异步执行，需要等待一段时间。

内存使用：

• createObjectURL 返回带有 hash 的 URL，该 URL 一直占用内存，直到触发 document 的 unload 事件（如关闭文档）或调用 revokeObjectURL 手动释放。
• FileReader.readAsDataURL 返回包含大量字符的 base64 字符串，相比 blob URL 消耗更多内存，但在不再使用时会自动通过垃圾回收机制从内存中清除。

在兼容性方面，这两个属性均兼容 IE10 及以上的浏览器。

优劣对比：

• 使用 createObjectURL 可以节省性能并提升速度，但缺点是在不使用时需要手动释放内存。
• 如果不介意设备性能问题，且希望直接获取图片的 base64 数据，则推荐使用 FileReader.readAsDataURL。

实际使用示例

使用方式：

objectURL = URL.createObjectURL(blob);

示例

html 文件

<input type="file" id="btn" accept="image/*" value="点击上传" />
<img id="img"/>

js 文件

btn.addEventListener('change',function(){
	let file = this.files[0];
	// 进一步防止文件类型错误
	if(!/image\/\w+/.test(file.type)){  
        alert("看清楚，这个需要图片！");  
        return false;  
    }  
	img.src = URL.createObjectURL(file)
})

到此这篇关于 URL.createObjectURL() 的使用方法的文章就介绍到这了，更多相关 URL.createObjectURL() 用法内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！