useObjectUrl

类别

Browser

导出大小

249 B

最近修改

2 days ago

代表对象的反应式 URL。

🌐 Reactive URL representing an object.

通过 URL.createObjectURL() 为提供的 File、Blob 或 MediaSource 创建一个 URL，并在源更改或组件卸载时通过 URL.revokeObjectURL() 自动释放该 URL。

🌐 Creates an URL for the provided File, Blob, or MediaSource via URL.createObjectURL() and automatically releases the URL via URL.revokeObjectURL() when the source changes or the component is unmounted.

示例

源代码在线运行

Select file:

Object URL:

none

用法

🌐 Usage

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

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

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

<template>
  <input type="file" @change="onFileChange">

  <a :href="url">Open file</a>
</template>

组件用法

🌐 Component Usage

<template>
  <UseObjectUrl v-slot="url" :object="file">
    <a :href="url">Open file</a>
  </UseObjectUrl>
</template>