Quasar 和 Vue 的新手。
我正在使用 q-file，它允许选择文件并拖放文件。
但是，如何显示预览图像？
Q-uploader 似乎可以工作，但我如何更改它的用户界面？
来自 Quasar 的组件链接：https://quasar.dev/vue-components/file-picker https://quasar.dev/vue-components/file-picker
在模板中定义 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 文件上创建 @change 挂钩：
在脚本中设置从 q-file 传入的文件的 url：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
