关于input="file"，重复选择同一文件时不触发change事件的问题

Question

正常的思路是每次获取到input的file后，清空input的内容，我百度了一下，有些方法是用表单的reset，但是如果只是单独的input="file"，不用from元素呢？而且网上搜出来的一些方法都是兼容性很差的，老司机们有可靠点的方法吗？

刚才看见了这种方式，请问兼容性怎么样？

Answer 1

input.addEventListener('click', function() {
    this.value = '';
}, false);

Answer 2

几种思路:
1.将input 的value设置为''，同楼上。
2.使用一个新的input替换掉当前input
3.移除input的value属性。

Answer 3

vue 可以这样实现
原理就是change之后 清除一下input元素在恢复

<template>
    <input v-if="!uploadImgClear" @change="uploadImg" type="file" accept="image/png, image/jpeg, image/gif, image/jpg">
</template>
<script>
export default {
    data () {
        return {
            uploadImgClear: 0,
        }
    },
    methods: {
        uploadImg (e) {
            let imgFile = e.target.files[0]
            let reader = new FileReader()
            reader.onload = (e) => {
                doSomething(e.target.result)  //这里处理读出来的base64数据
                this.uploadImgClear = 0
            }
            reader.readAsDataURL(imgFile)
            this.uploadImgClear = 1
        },
    }
}
</script>