vue中使用input[type=file]不能上传重复的文件

问题:上传文件时,第二次上传文件选择跟上次一样的文件时,不会触发onchange事件。

解决办法:onchange监听的是input中的value值,只有在其中的内容发生改变的时候才触发事件,而value在上传文件的时候保存的是文件的内容,你只需要在上传成功的回调里面,将当前input的value值置空即可。这在一般的直接的文件上传中可以生效,但是在间接上传时不会生效。因为间接上传时获取不到onchange事件中的值,所以调用不到里面的值,在使用vue的框架时,我们可以把这个变量赋值给设置的值。如:

//选择文件的触发事件
onChangeFile(e) {
      this.changeFile = e //这里的e就是事件触发获取到的所有的值
    },

//在文件上传成功之后再将值赋为空
this.changeFile.target.value = ""

因为vue变量的特性,经过这样的间接赋值就可以操作到事件中的值从而达到清空文件内容的值,就可以上传重复的文件了。
同理原生的input文件上传方法只要在数据处理完之后再将event.target.value=''将它置空就好了。

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐