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事件会根据这个文件名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
        }
      },

猜你喜欢

转载自blog.csdn.net/weixin_39818813/article/details/121338465