JS中URL.createObjectURL使用示例讲解
前言
URL.createObjectURL()
语法
参数
返回值
示例
URL.revokeObjectURL()
语法
参数objectURL
Returnvalue
示例
与FileReader.readAsDataURL(file)区别
主要区别
执行时机
内存使用
优劣对比
总结
前言URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。
URL.createObjectURL() 语法objectURL = URL.createObjectURL(object);
参数
用于创建 URL 的 File 对象、Blob 对象或者 MediaSource 对象。
返回值一个DOMString包含了一个对象URL，该URL可用于指定源 object的内容。
示例// html代码
<input type="file" id="file">
// js代码
document.querySelector('#file').onchange = function (e) {
console.log(e.target.files[0])
console.log(URL.createObjectURL(e.target.files[0]))
}
将上方console控制台打印的blob文件资源地址粘贴到浏览器中
blob:http://localhost:8080/1ece2bb1-b426-4261-89e8-c3bec43a4020
在每次调用 createObjectURL() 方法时，都会创建一个新的 URL 对象，即使你已经用相同的对象作为参数创建过。当不再需要这些 URL 对象时，每个对象必须通过调用 URL.revokeObjectURL() 方法来释放。
浏览器在 document 卸载的时候，会自动释放它们，但是为了获得最佳性能和内存使用状况，你应该在安全的时机主动释放掉它们。
语法window.URL.revokeObjectURL(objectURL);
参数 objectURL
一个 DOMString，表示通过调用 URL.createObjectURL() 方法返回的 URL 对象。
Return valueundefined
示例// html代码
<input type="file" id="file">
<img id="img1" style="width: 200px;height: auto" />
<img id="img2" style="width: 200px;height: auto" />
// js代码
document.querySelector('#file').onchange = function (e) {
const file = e.target.files[0]
const URL1 = URL.createObjectURL(file)
console.log(URL1)
document.querySelector('#img1').src = URL1
URL.revokeObjectURL(URL1)
const URL2 = URL.createObjectURL(file)
console.log(URL2)
document.querySelector('#img2').src = URL2
}
若对FileReader不了解，则可以翻看这篇文章
主要区别通过FileReader.readAsDataURL(file)可以获取一段data:base64的字符串
通过URL.createObjectURL(blob)可以获取当前文件的一个内存URL
createObjectURL是同步执行（立即的）
FileReader.readAsDataURL是异步执行（过一段时间）
createObjectURL返回一段带hash的url，并且一直存储在内存中，直到document触发了unload事件（例如：document close）或者执行revokeObjectURL来释放。
FileReader.readAsDataURL则返回包含很多字符的base64，并会比blob url消耗更多内存，但是在不用的时候会自动从内存中清除（通过垃圾回收机制）
使用createObjectURL可以节省性能并更快速，只不过需要在不使用的情况下手动释放内存
如果不太在意设备性能问题，并想获取图片的base64，则推荐使用FileReader.readAsDataURL
到此这篇关于JS中URL.createObjectURL使用的文章就介绍到这了,更多相关JS URL.createObjectURL讲解内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网！
