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.

示例

source

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>

类型声明

/**
 * 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>>

源代码

源代码 • 示例 • 文档

变更日志

No recent changes