Quasar：使用q-file选择图像时如何显示图像？答案

【问题标题】：Quasar: how to display an image when using q-file to pick the image?Quasar：使用q-file选择图像时如何显示图像？
【发布时间】：2021-04-22 08:22:53
【问题描述】：

Quasar 和 Vue 的新手。

我正在使用允许选择文件和拖放文件的 q-file。但是，如何显示图像以供预览？

Q-uploader 似乎可以工作，但我如何更改它的用户界面？

Quasar 中的组件链接： https://quasar.dev/vue-components/file-picker

【问题讨论】：

标签： quasar-framework quasar

【解决方案1】：

在你的模板中定义一个 q-file 和 q-img 元素。添加 @change 处理程序和 updateFile 函数。 q-img 将包含您选择的图片。

import { ref } from 'vue';
import { defineComponent } from 'vue';
<script lang="ts">
export default defineComponent({
  name: 'Component Name',
  components: {},

setup () {

    const image = ref(null);
    const image1Url = ref('')

    return {
      image,
      image1Url,

      updateFile() {
        imageUrl.value = URL.createObjectURL(image.value);
      }
    }
  }
})
</script>

<div>
  <q-file
    v-model="image"
    label="Pick one file"
    filled
    style="max-width: 300px"
    @change="updateFile()"
  />
</div>
<div>
  <q-img
    :src="imageUrl"
    spinner-color="white"
    style="height: 140px; max-width: 150px"
  />
</div>

在 q-file 上创建一个 @change 钩子：

在脚本中设置从 q-file 传入的文件的 url：

【讨论】：

这对我有用。谢谢！