Quiero tener una vista previa de la foto en mi código a continuación. Estoy trabajando con BootstrapVue.

Pero no sé dónde está el problema... después de buscar en mis devtools de Vue, puedo ver que el archivo de formulario tiene la imagen, pero mi "reloj" no funciona...

¡Sería muy útil si alguien me puede ayudar!

Mi plantilla:

 <template> <div> <div v-for="item in files" :key="item.id"> <b-button vb-toggle="item.id" variant="danger btn-block mb-2"> Upload {{ item.id }}</b-button> <b-collapse :id="item.id" class="mt-2"> <div class="m-2 mt-3"> <table class="table table-striped mt-2"> <tbody> <div class="mt-3 mb-2 ml-1">Upload</div> <b-form-file :v-model="item.request" placeholder="Upload ..." class="mb-2" ></b-form-file> <b-img v-if="item.request" :src="item.src" class="mb-3" fluid block rounded ></b-img> </tbody> </table> </div> </b-collapse> </div> </div> </template>

Mi guion:

 <script> const base64Encode = (data) => new Promise((resolve, reject) => { const reader = new FileReader(); reader.readAsDataURL(data); reader.onload = () => resolve(reader.result); reader.onerror = (error) => reject(error); }); export default { data() { return { files: [ { id: "1", src: null, request: null }, { id: "2", src: null, request: null }, { id: "3", src: null, request: null }, ], }; }, watch: { files: { deep: true, //watch changes at objects properties handler(newValue, oldValue) { if (newValue !== oldValue) { if (newValue) { base64Encode(newValue.src) .then((value) => { newValue.src = value; }) .catch(() => { newValue.src = null; }); } else { newValue.src = null; } } }, }, }, }; </script>