问题:

在文件上传的时候我们通常选择监控change事件来获取文件信息,比如我选择了A图片然后点击叉号关掉再重新选择A图片;会发现A图片选择不上,因为没有触发change事件;

原因:选择相同的文件时不会触发change事件,认为你的值没有改变。

下面有两种方式解决

1,普通js处理方式

在拿到图片的重要信息之后加上下面一句即可:

  解决选择相同的文件 不触发change事件的问题
  event.target.value = '';
  或者:
  event.target.value = null;

完整代码如下:

	===========================选中后拿到的图片信息==================
    uploadImg(event) {
      // 1,拿到图片文件
      const file = event.target.files[0];
      // 2,判断格式
      if (!/\.(jpg|jpeg|png|JPG|PNG)$/.test(event.target.value)) {
        return Toast('文件格式不正确');
      }
      // 3,判断图片的大小 暂不需要
      // 4,取得图片文件
      const reader = new FileReader();
      // FileReader.readAsDataURL(file)可以得到一段base64的字符串。
      reader.readAsDataURL(file);
      reader.onload = (loadFile) => {
        ...对图片的处理过程
        // 在最后面添加上这段代码 解决选择重复文件的问题
        event.target.value = '';
      };
    },

2,vue项目处理方式

在vue中我们可以直接通过ref获取节点 ,直接置空即可,和上面的方式其实是一样的道理。

this.$refs.inputFile.value=null;
Logo

前往低代码交流专区

更多推荐