vue3 事件响应问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 784 天前的主题，其中的信息可能已经有所发展或是发生改变。

setup(){
    const uploadInput = ref(null)
    const clickUpload = (e) => {
      if (uploadInput.value) {
        console.log(uploadInput.value) # 每次触发都打印了 2 次
        uploadInput.value.click()
      }
    }
    const fileChange = (e) => {
      console.log(e) # 第二次选择文件没有触发事件
    }
}

    
<template>
    <div class="container content">
        <div class="upload-box" @click="clickUpload">
        	<input type="file" class="hidden" accept="image/*" ref="uploadInput" @change="fileChange">
        </div>
    </div>
</template>

第二次选择文件为什么没有触发事件？

5 条回复 • 2022-10-01 18:00:10 +08:00

rabbbit

2022-10-01 16:31:30 +08:00

同一个文件不会而二次触发 change 事件

fangwenxue

2022-10-01 16:32:55 +08:00

@rabbbit Soga

clickUpload 为什么会打印 2 次，加了 stop 也不行

rabbbit

2022-10-01 16:57:57 +08:00

弹一次就 <input @click.stop type="file" class="hidden" accept="image/*" ref="uploadInput" @change="fileChange">
为什么要在 upload-box 里 uploadInput.value.click()，是想自定义 input 按钮的样式吗？

rabbbit

2022-10-01 17:22:14 +08:00

研究了一下，1 楼的回复应该是错误的。我也不清楚为什么不会触发两次。
不过有一点可以确定的是，不要这样写。
现在的代码加个 setTimeout 进去直接就变成死循环了。

<template>
<div class="container content">
<div class="upload-box" @click="clickUpload">
<input type="file" class="hidden" accept="image/*" ref="uploadInput" @change="fileChange">
</div>
</div>
</template>

<script>
import {ref} from 'vue'
export default {
setup(){
const uploadInput = ref(null)
const clickUpload = (e) => {
if (uploadInput.value) {
console.log(uploadInput.value)
setTimeout(() => {
uploadInput.value.click()
})
}
}
const fileChange = (e) => {
console.log(e)
}
return {
uploadInput,clickUpload,fileChange
}
}
}
</script>

yunyuyuan

2022-10-01 18:00:10 +08:00

https://stackoverflow.com/questions/4109276/how-to-detect-input-type-file-change-for-the-same-file
你两次选择了同一个文件

vue3 事件响应问题

第二次选择文件为什么没有触发事件 ？

第二次选择文件为什么没有触发事件？