useObjectUrl

Category

Browser

Export Size

278 B

Last Changed

15 minutes ago

响应式对象的 URL。

通过 URL.createObjectURL() 为提供的 File、Blob 或 MediaSource 创建一个 URL，并在源发生变化或组件卸载时自动释放 URL，通过 URL.revokeObjectURL() 实现。

Demo

source

选择文件:

Object URL:

none

使用方法

<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">打开文件</a>
</template>

组件使用

<template>
  <UseObjectUrl v-slot="url" :object="file">
    <a :href="url">打开文件</a>
  </UseObjectUrl>
</template>

类型声明

/**
 * 响应式 Object URL
 *
 * @see https://vueuse.org/useObjectUrl
 * @param object
 */
export declare function useObjectUrl(
  object: MaybeRefOrGetter<Blob | MediaSource | null | undefined>,
): Readonly<Ref<string | undefined, string | undefined>>

Source

Source • Demo • Docs

贡献者

Anthony Fu

丶远方

Anthony Fu

Andrew Ferreira

vaakian X

BaboonKing

Michael Hüneburg

变更日志

v10.3.0 on 7/30/2023

d3f7e - fix: improve parameter type (#3239)

v9.11.0 on 1/17/2023

d5321 - fix(components): mark defineComponent as pure (#2623)