useObjectUrl

分类

浏览器

导出大小

247 B

上次更改

8 个月前

代表对象的响应式 URL。

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

演示

源代码在线演练 (beta)

选择文件

对象 URL

无

用法

vue

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

组件用法

此函数还通过 @vueuse/components 包提供了一个无渲染组件版本。了解更多用法。

vue

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

类型声明

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