如何使用Quasar q文件选择器来显示图像

Question

我正在尝试使用Quasar q文件选择器来显示配置文件图片。

我使用这个答案中的代码，并根据我的需要对其进行了轻微调整。

但我的handleUpload函数从未被触发。

怎么回事？我该如何解决这个问题？

<template>
<div>
<q-file
v-model="image"
label="Pick one file"
filled
style="max-width: 300px"
@change="handleUpload"
/>
</div>
<div>
<q-img
:src="imageUrl"
spinner-color="white"
style="height: 140px; max-width: 150px"
/>
</div>
</template>
<script setup lang="ts">
import { ref, Ref } from 'vue';
const image: Ref<File | null> = ref(null);
const imageUrl = ref('');
const handleUpload = () => {
console.log('handleUpload is triggered');
if (image.value) {
imageUrl.value = URL.createObjectURL(image.value);
}
};
</script>

Answer 1

尝试@update:model-value而不是@change:

const { ref } = Vue
const app = Vue.createApp({
setup () {
const image = ref(null);
const imageUrl = ref('');
const handleUpload = () => {
console.log('handleUpload is triggered');
if (image.value) {

imageUrl.value = URL.createObjectURL(image.value);
}
}

return {
image, imageUrl, handleUpload
}
}
})
app.use(Quasar)
app.mount('#q-app')

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/quasar@2.4.13/dist/quasar.prod.css" rel="stylesheet" type="text/css">
<div id="q-app">
<div>
<q-file
v-model="image"
label="Pick one file"
filled
style="max-width: 300px"
@update:model-value="handleUpload()"
></q-file>
</div>
<div>
<q-img
:src="imageUrl"
spinner-color="white"
style="height: 140px; max-width: 150px"
></q-img>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@2.4.13/dist/quasar.umd.prod.js"></script>