VueUse 中文网

主题

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

vue
<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

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

类型声明 ​

typescript
/**
 * Reactive URL representing an object.
 *
 * @see https://vueuse.org/useObjectUrl
 * @param object
 */
export declare function useObjectUrl(
  object: MaybeRefOrGetter<Blob | MediaSource | null | undefined>,
): Readonly<Ref<string | undefined, string | undefined>>

源代码 ​

源代码 • 示例 • 文档

变更日志 ​

7432f - feat(types): deprecate MaybeRef and MaybeRefOrGetter in favor of Vue's native (#4636)