useObjectUrl

カテゴリ

エクスポートサイズ

278 B

最終変更日

先週

オブジェクトを表すリアクティブな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.dokyumento.jp/useObjectUrl
 * @param object
 */
export declare function useObjectUrl(
  object: MaybeRefOrGetter<Blob | MediaSource | null | undefined>,
): Readonly<Ref<string | undefined, string | undefined>>