useObjectUrl

オブジェクトを表すリアクティブなURL。

指定された File、Blob、または MediaSource に対して URL.createObjectURL() を使用してURLを作成し、ソースが変更されたときやコンポーネントがアンマウントされたときに URL.revokeObjectURL() を介して自動的にURLを解放します。

使用法

<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">ファイルを開く</a>
</template>

コンポーネントの使用法

<template>
  <UseObjectUrl v-slot="url" :object="file">
    <a :href="url">ファイルを開く</a>
  </UseObjectUrl>
</template>