在Vue Js中,我们如何在相同的文件输入中检测文件输入的变化<input ref="imageUploader" type="file" @change="uploadImageFile">
<input ref="imageUploader" type="file" @change="uploadImageFile">
daupos2t1#
我们可以添加@click事件,然后清除文件输入的值
<template> .... <input ref="imageUploader" type="file" accept=".jpg, .jpeg" @click="resetImageUploader" @change="uploadImageFile"> .... </template> <script> export default { methods: { resetImageUploader() { this.$refs.imageUploader.value = ''; }, uploadImageFile() { .... } } } </script>
sirbozc52#
与@zubair的答案相同,但对于vue 3更方便:
vue 3
<input type="file" @change="renderImage($event)" @click="$event.target.value=''">
ohtdti5x3#
@zubair-0和@grreeenn的答案是完全有效的,这里你可以有一个实现,在上传的文件被处理后,用一个空字符串初始化输入值,因为只有当值改变时事件才会触发,你可以在Vue 3中使用Template Refs来完成这一操作。
<template> <input ref="imageUploader" type="file" class="custom-file-input" name="file-upload" accept="image/png, image/gif, image/jpeg" @change="uploadImageFile($event)" > </template> <script> import { ref } from 'vue' export default { setup() { const imageUploader = ref(null) const uploadImageFile = (event) => { console.log('File loaded...') // We initialize the input value, this is the trick imageUploader.value.value = '' } return { imageUploader, uploadImageFile } } } </script>
hc2pp10m4#
我用钥匙修理。例如ple
我希望这对你有帮助
4条答案
按热度按时间daupos2t1#
我们可以添加@click事件,然后清除文件输入的值
sirbozc52#
与@zubair的答案相同,但对于
vue 3
更方便:ohtdti5x3#
@zubair-0和@grreeenn的答案是完全有效的,这里你可以有一个实现,在上传的文件被处理后,用一个空字符串初始化输入值,因为只有当值改变时事件才会触发,你可以在Vue 3中使用Template Refs来完成这一操作。
hc2pp10m4#
我用钥匙修理。例如ple
我希望这对你有帮助