如何从外部Q-BTN触发隐藏的类星体Q-FILE输入？ [英] How do I trigger a hidden Quasar q-file input from an external q-btn?

问题描述

我有一个用于选择图像文件的q-file元素和一个用于显示图像的q-img元素。

我不喜欢q-file输入样式，所以我想隐藏它并从外部q-btn触发图像上载。

但我不知道如何从外部q-btn触发q-file。

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

const { ref } = Vue
const app = Vue.createApp({
  setup () {
  
    const image = ref(null);
    const imageUrl = ref('');
    
    const handleUpload = () => {
      if (image.value) {
        imageUrl.value = URL.createObjectURL(image.value);
      }
    }
    
    const handleUploadBtnClick = () => {
      // Somehow trigger the hidden q-file selection window
    }
    
    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
      style="display: none"
      v-model="image"
      @update:model-value="handleUpload()"
   ></q-file>
  </div>
  <div>
    <q-btn
      type="button"
      label="Upload Photo"
      @click="handleUploadBtnClick"
   ></q-btn>
  </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>

推荐答案

可以创建reftoq-file，然后从q-btn用file.value.pickFiles()

调用 数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

const { ref, onMounted } = Vue
const app = Vue.createApp({
  setup () {
  
    const image = ref(null);
    const imageUrl = ref('');
    const file = ref(null)
    
    const handleUpload = () => {
      if (image.value) {
        imageUrl.value = URL.createObjectURL(image.value);
      }
    }
    
    const handleUploadBtnClick = () => {
      file.value.pickFiles()
    }
    
    return {
      image, imageUrl, handleUpload, handleUploadBtnClick, file
    }
  }
})

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
      style="display: none"
      v-model="image"
      @update:model-value="handleUpload"
      ref="file"
   ></q-file>
  </div>
  <div>
    <q-btn
      type="button"
      label="Upload Photo"
      @click="handleUploadBtnClick"
   ></q-btn>
  </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>

这篇关于如何从外部Q-BTN触发隐藏的类星体Q-FILE输入？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！