URL.createObjectURL()和URL.revokeObjectURL()

本文介绍了如何使用JavaScript的URL.createObjectURL()方法创建指向Blob对象的URL,以及如何在不再需要时通过URL.revokeObjectURL()来释放资源。示例展示了在Vue组件中处理WebWorker的工作URL的生命周期管理。
摘要由CSDN通过智能技术生成

URL.createObjectURL():根据传入的参数创建一个指向该参数对象的URL,使用此URL可以访问到指定的文件,这个URL仅存在于当前被创建的文档中,新的对象URL指向执行的File对象或者是Blob对象

import workerCode from './workerSelf.js?raw';//?raw是为了标识以文件的方式import,而不是以内容
const workUrl = window.URL.createObjectURL(blob);
let worker =new Worker(workUrl);

URL.revokeObjectURL():释放通过URL.createObjectURL()创建的对象URL,当只需要访问一次,已经使用过了对象URL,通知浏览器URL已经不再需要指向对应的文件,将对象URL释放,调用此方法.

onBeforeMount(()=>{
    window.URL.revokeObjectURL(workUrl);
})

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
根据提供的引用内容,可以知道window.URL.createObjectURL()和window.URL.revokeObjectURL()应该成对使用[^1]。而Promise是ES6中新增的一种异步编程解决方案,可以让我们更加优雅地处理异步操作。URL.createObjectURL()方法是用于创建指向File对象的URL,可以将Blob或File对象表示为字符串的URL。而Promise对象可以帮助我们更好地处理异步操作,避免回调函数嵌套导致代码难以维护和理解。 下面是一个使用Promise和URL.createObjectURL()来读取文件的例子: ```javascript function readFileAsync(file) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onload = () => { resolve(reader.result); }; reader.onerror = reject; reader.readAsDataURL(file); }); } const input = document.createElement('input'); input.type = 'file'; input.addEventListener('change', async () => { const [file] = input.files; const url = URL.createObjectURL(file); const dataUrl = await readFileAsync(file); console.log(url); console.log(dataUrl); URL.revokeObjectURL(url); }); ``` 上面这个例子中,readFileAsync()方法返回一个Promise对象,该对象在异步读取文件完成后会调用resolve()方法返回结果。在input元素的change事件监听回调中,我们使用URL.createObjectURL()方法创建指向File对象的URL,然后使用readFileAsync()读取文件内容。等待readFileAsync()完成后,我们打印出URL和dataUrl并使用URL.revokeObjectURL()方法释放URL对象的引用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值