Estoy tratando de usar un componente de 'selector de archivos' globalmente en mi aplicación y obtener el 'imageUrl' base64 para manipular la carga en el servidor.
Tengo lo siguiente en mi componente:
<template> <div class="column" style="width: 300px;"> <q-btn @click="sendEventImage ()" style="margin-top: 16px; margin-bottom: 32px;" outline color="white" text-color="black" label="Procurar imagem" /> <input style="display:none" ref="EventfileInput" @change="onEventFilePicked" type="file" name="upload" accept="image/*" /> <q-img class="w-30 h-30" :src="imageUrl" /> </div> </template> <script> import { defineComponent, ref } from 'vue' export default defineComponent({ name: 'PageIndex', setup () { let imageUrl = ref('') let model = ref(null) return { sendEventImage () { console.log('sendEvent preview') this.$refs.EventfileInput.click() }, onEventFilePicked (event) { const files = event.target.files let image = files[0] console.log(image) let filename = files[0].name if (filename.lastIndexOf('.') <= 0) { return alert('Por favor adicione um arquivo válido') } const fileReader = new FileReader() fileReader.addEventListener('load', (event) => { this.imageUrl = fileReader.result console.log('setimageUrl', this.imageUrl) }) fileReader.readAsDataURL(files[0]) }, imageUrl, model } } }) </script>¿Cómo puedo usar este componente en cada componente de mi aplicación y también obtener el parámetro "imageUrl" en mi configuración () para usar este parámetro?
Deberá emit un evento para que el componente principal pueda reaccionar: https://v3.vuejs.org/guide/composition-api-setup.html#accessing-component-properties
No probado:
<template> <div class="column" style="width: 300px;"> <q-btn @click="sendEventImage ()" style="margin-top: 16px; margin-bottom: 32px;" outline color="white" text-color="black" label="Procurar imagem" /> <input style="display:none" ref="EventfileInput" @change="onEventFilePicked" type="file" name="upload" accept="image/*" /> <q-img class="w-30 h-30" :src="imageUrl" /> </div> </template> <script> import { defineComponent, ref } from 'vue' export default defineComponent({ name: 'FileUpload', emits: ['imageloaded'], setup (props, { emit }) { const imageUrl = ref(''); const EventfileInput = ref(null); const onEventFilePicked = (event) => { const files = event.target.files const image = files[0] console.log(image) const filename = files[0].name if (filename.lastIndexOf('.') <= 0) { return alert('Por favor adicione um arquivo válido') } const fileReader = new FileReader() fileReader.addEventListener('load', (event) => { imageUrl.value = fileReader.result console.log('setimageUrl', imageUrl.value) emit('imageloaded',imageUrl.value); }) fileReader.readAsDataURL(files[0]) }; const sendEventImage = () => { console.log('sendEvent preview') EventfileInput.click() }; return { imageUrl, sendEventImage, onEventFilePicked } } }) </script>Algunas observaciones sobre su código que cambié en mi ejemplo:
this en setup()const para referencias para evitar anularlas accidentalmente y perder reactividad.