useObjectUrl

類別

瀏覽器

導出大小

263 B

上次變更

5 天前

代表物件的響應式 URL。

透過 URL.createObjectURL() 為提供的 File、Blob 或 MediaSource 建立 URL，並在來源變更或元件卸載時，透過 URL.revokeObjectURL() 自動釋放 URL。

範例

來源

選擇檔案

物件 URL

無

用法

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>

元件用法

此函式也透過 @vueuse/components 套件提供無渲染元件版本。瞭解更多關於用法。

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.dev.org.tw/useObjectUrl
 * @param object
 */
export declare function useObjectUrl(
  object: MaybeRefOrGetter<Blob | MediaSource | null | undefined>,
): Readonly<Ref<string | undefined, string | undefined>>