[Vuejs]-Getting absolute file path with q-file Quasar

by

1👍

use two object, one for image in blob and other to URL, use URL.createObjectURL for get URL from image file:

<script setup>
import { ref } from 'vue'
const fotos = ref(null)
const fotos = ref(null)
const fotosURL = ref([])
const slide = ref(1)

function obtenerURL () {
if (fotos.value) {
fotos.value.forEach(element => {
  fotosURL.value.push(URL.createObjectURL(element))
})
}
}

</script>

<q-file
  v-model="fotos"
  label="Seleccione los archivos"
  filled
  multiple
  accept=".jpg, image/*"
  style="max-width: 400px"
  @update:model-value="obtenerURL"
/>
<q-carousel
  animated
  v-model="slide"
  arrows
  navigation
  infinite
  v-if="fotosURL.length>0"
>
  <q-carousel-slide v-for="(img,id) in fotosURL" :key="id"
  :name="id+1" :img-src="img" />
</q-carousel>

Leave a comment