需求要做一个上传图片的组件,可上传多张,上传重复图片时提示重复,使用input上传,当图片重复时并不会触发change事件,导致无法添加提示,解决方案是上传图片完成后清空input中的value。

思路是:

1.定义dom结构,定义input的ref名称,获取到input的value值;

<input type="file"
       class="add"
       @change="addImg"
       ref="inputImg"
       accept="image/gif, image/jpeg, image/png, image/jpg">

2.定义一个数组valueAll,存储历史value值,用于跟当前value作对比,判重;

 data() {
       return {
          valueAll: [] // 累计上传的图片
       };
   }

3.在addImg函数中首先加入鉴别重复图片的方法,获取上传的value值,如果该value已存在于valueAll中,提示重复并return;

let value = this.$refs.inputImg.value;
    if (this.valueAll.includes(value)) {
        this.$message({
            message: '图片上传重复,请重新选择!',
            type: 'warning'
        });
        return;
    }

4.图片处理完成之后,将当前value推进valueAll数组中,并将当前value置为空。

// 将当前的value赋给this.valueAll,将value置空,避免input重复上传图片不触发change事件
                    this.valueAll.push(value);
                    this.$refs.inputImg.value = '';

Logo

前往低代码交流专区

更多推荐