如何使用 Quasar q-file picker 来显示图像？

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>