如何从外部q-btn触发隐藏的Quasar q-file输入

Question

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

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

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

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>

Answer 1

Hi@TinyTiger我一直在用Script Setup和TypeScript搜索同样的东西，并在Yusuf Kandemir的帮助下完成了这项工作。

<template>
<q-card>
<q-avatar
color="red"
v-on:click="selectFile()"
>
<q-img
v-bind:src="img"
v-bind:fit="'contain'"
v-bind:ratio="1"
/>
</q-avatar>
<q-file
ref="fileRef"
v-model="fileModel"
style="display: none"
v-bind:max-files="1"
accept="image/*"
v-on:update:model-value="fileOnUpdate"
/>
</q-card>
</template>
<script setup lang="ts">
import { Ref, ref, onUnmounted } from 'vue'
import { QFile } from 'quasar'
const fileModel = ref<File>()
const fileRef = ref() as Ref<QFile>
const img = ref<string>()
function selectFile() {
fileRef.value.pickFiles()
}
function fileOnUpdate(selectedFile: File) {
if (img.value) {
URL.revokeObjectURL(img.value)
}
img.value = URL.createObjectURL(selectedFile)
}
onUnmounted(() => {
if (img.value) {
URL.revokeObjectURL(img.value)
}
})
</script>

Answer 2

您可以创建ref到q-file，然后从q-btn用file.value.pickFiles()调用它

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>