详解JavaScript如何生成临时链接

前言

在前端开发中，若需实现文件上传后的临时访问链接功能，可借助URL.createObjectURL与FileReader.readAsDataUR相关API来完成。

URL.createObjectURL()

调用URL.createObjectURL()静态方法会生成一个DOMString类型的字符串，该字符串代表传入参数所指对象的URL地址。此URL的生命周期与创建它的窗口环境中的document紧密关联。新生成的URL对象指向特定的File或Blob实例。

1. 语法

let objectURL = URL.createObjectURL(object);

2. 参数

用于生成URL的File、Blob或MediaSource对象。

3. 返回值

返回一个包含对象URL的DOMString，该URL可用于指定源object的内容展示。

4. 示例

<input type="file" id="file">

document.querySelector('#file').onchange = function (e) {
  console.log(e.target.files[0])
  console.log(URL.createObjectURL(e.target.files[0]))
}

将控制台输出的blob文件资源地址复制并粘贴至浏览器地址栏中即可访问。

blob:http://localhost:8080/1ece2bb1-b426-4261-89e8-c3bec43a4020

URL.revokeObjectURL()

每次调用createObjectURL()都会创建一个新的URL对象，即便使用相同的源对象作为参数也是如此。当不再需要这些URL对象时，必须通过调用URL.revokeObjectURL()方法来手动释放资源。

虽然浏览器会在卸载时自动释放这些URL，但为了获得最佳性能和更优的内存使用状况，建议在合适的时机主动释放它们。

1. 语法

window.URL.revokeObjectURL(objectURL);

2. 参数 objectURL

一个DOMString类型的字符串，表示通过调用URL.createObjectURL()方法所返回的URL对象。

3. 返回值

undefined

4. 示例

<input type="file" id="file">
<img id="img1" style="width: 200px;height: auto" />
<img id="img2" style="width: 200px;height: auto" />

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.readAsDataURL(file)区别

1. 主要区别

• 通过FileReader.readAsDataURL(file)可以获取一段data:base64编码的字符串。
• 通过URL.createObjectURL(blob)可以获取当前文件在内存中的URL。

2. 执行时机

• createObjectURL是同步执行（立即返回）。
• FileReader.readAsDataURL是异步执行（需等待一段时间）。

3. 内存使用

• createObjectURL返回一段带有hash标记的url，并一直驻留在内存中，直到document触发unload事件（如document close）或执行revokeObjectURL进行释放。
• FileReader.readAsDataURL则返回包含大量字符的base64，相比blob url会消耗更多内存，但在不再使用时会自动通过垃圾回收机制从内存中清除。

4. 优劣对比

• 使用createObjectURL可以节省性能且速度更快，但需在不使用时手动释放内存。
• 若不在意设备性能问题，且希望获取图片的base64格式数据，则推荐使用FileReader.readAsDataURL。

到此这篇关于详解JavaScript如何生成临时链接的文章就介绍到这了,更多相关JavaScript生成临时链接内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！