vue3 事件响应问题

[fangwenxue]

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>

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

[rabbbit]

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

[fangwenxue]

@rabbbit Soga

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

[rabbbit]

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

[rabbbit]

研究了一下，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]

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