VueUse useObjectUrl 响应式对象URL

VueUse useObjectUrl 响应式对象URL，通过URL.createObjectURL()为File、Blob或MediaSource对象创建URL，组件卸载时通过URL.revokeObjectURL()自动释放URL。

什么是createObjectURL

URL.createObjectURL() 方法会创建一个对象URL，这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象，可以通过这个URL访问对象。

代码示例

<script setup>
import { useObjectUrl } from '@vueuse/core'
import { shallowRef } from 'vue'

const file = shallowRef()
const url = useObjectUrl(file)

const onFileChange = (event) => {
  file.value = event.target.files[0]
}
</script>

<template>
  <input type="file" @change="onFileChange" />
  <a :href="url">Open file</a>
</template>

组件实例

<template>
  <UseObjectUrl v-slot="url" :object="file">
    <a :href="url">Open file</a>
  </UseObjectUrl>
</template>
<script setup>  
 //导入组件
 import {UseObjectUrl} from '@vueuse/components'
</script>

在线例子

例子