当前位置:   article > 正文

vue中使用input[type=file]文件上传成功之后再不能在上传刚刚上传的文件_vue2中禁用type=file

vue2中禁用type=file

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

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

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

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

//在文件上传成功之后再将值赋为空
this.changeFile.target.value = ""
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/盐析白兔/article/detail/181527
推荐阅读
相关标签
  

闽ICP备14008679号