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.
例子
选择文件:
对象URL:
noneUsage
html
<script setup>
import { useObjectUrl } from '@vueuse/core'
import { shallowRef } from 'vue'
const file = shallowRef()
const url = useObjectUrl(file)
const onFileChange = (event) => {
file.value = event.target.files[0]
}
</script>
<template>
<input type="file" @change="onFileChange" />
<a :href="url">Open file</a>
</template>
<script setup>
import { useObjectUrl } from '@vueuse/core'
import { shallowRef } from 'vue'
const file = shallowRef()
const url = useObjectUrl(file)
const onFileChange = (event) => {
file.value = event.target.files[0]
}
</script>
<template>
<input type="file" @change="onFileChange" />
<a :href="url">Open file</a>
</template>
Component Usage
该函数还通过
@vueuse/components提供了一个无渲染的组件版本。了解更多.
This function also provides a renderless component version via the
@vueuse/componentspackage. Learn more about the usage.
html
<template>
<UseObjectUrl v-slot="url" :object="file">
<a :href="url">Open file</a>
</UseObjectUrl>
</template>
<template>
<UseObjectUrl v-slot="url" :object="file">
<a :href="url">Open file</a>
</UseObjectUrl>
</template>
Type Declarations
typescript
/**
* Reactive URL representing an object.
*
* @see https://vueuse.org/useObjectUrl
* @param object
*/
export declare function useObjectUrl(
object: MaybeRef<Blob | MediaSource | undefined>
): Readonly<Ref<string | undefined>>
/**
* Reactive URL representing an object.
*
* @see https://vueuse.org/useObjectUrl
* @param object
*/
export declare function useObjectUrl(
object: MaybeRef<Blob | MediaSource | undefined>
): Readonly<Ref<string | undefined>>