input[type=“file“] change事件第二次不触发
问题:用input上传图片时,如果第二次传递的跟第一次是一样的图片,那么此时会出现:change事件不再触发。代码:<input type="file" ref="upload" id="imgUrl" @change="uploadChange"accept="image/jpg, image/jpeg, image/png" />解析:首先这种情况是正常的,不是bug,我们可以看到
·
问题:
用input上传图片时,如果第二次传递的跟第一次是一样的图片,那么此时会出现:change事件不再触发。
代码:
<input type="file" ref="upload" id="imgUrl" @change="uploadChange"
accept="image/jpg, image/jpeg, image/png" />
解析:
首先这种情况是正常的,不是bug,我们可以看到,每次上传的时候input右侧都有一个文件名。那么change事件会根据这个文件名value是否修改来触发change事件。
解决:
在change事件中的最后将本次的value置空。
uploadChange() {
let files = this.$refs["upload"].files[0];
this.flieData = files
...
if (!validImage(files, 2)) {
// 防止第二次传同图片,不触发uploadChange
this.$refs["upload"].value = ''
return
}
},
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐



所有评论(0)