useObjectUrl

代表对象的反应式 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.

示例

源代码playground (beta)

Select file:

Object URL:

none

用法

¥Usage

<script setup>
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>