vue input文件上传同一个文件，无法调用change事件，解决方法。

浅浅一笑^*^

已于 2023-02-17 16:37:26 修改

阅读量1.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue项目遇到bug 文章标签： vue javascript vue.js 前端经验分享

于 2022-09-30 12:28:48 首次发布

本文链接：https://blog.csdn.net/weixin_46409887/article/details/127113808

vue项目遇到bug 专栏收录该内容

27 篇文章

订阅专栏

当上传相同的文件时，HTML input[type=file] 的change事件不会再次触发。通过在API请求成功后更改文件输入类型为text，然后恢复为file，可以确保每次上传时change事件都能生效。此方法对于监测文件内容变化并触发更新非常有用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前景问题：数据请求遇到上传文件只识别不同的文件名生效，同一个文件就不生效change事件了，同一个文件修改内容后还是这个文件。

方法如下:

htmL:

input  type=file id=Inputid @change=onchange

js：

onchange（）｛
这里调用API接口之后，请求成功后把之前的value值清空
下次在调用同一个文件夹，就会生效了。

代码如下：
//1.请求后 改变一下文件类型 这样下次就会检测到是text文件，就会触发change事件
document.querySelector("#fileInput").setAttribute('type', 'text');
//2.之后再给改过来，type类型。           
document.querySelector("#fileInput").setAttribute('type', 'file')
｝

总结：成功解决了上传同一个文件，change事件不生效的问题。
记录一下：希望帮到每一个遇到这个问题的小伙伴们。