需求要做一个上传图片的组件,可上传多张,上传重复图片时提示重复,使用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 = '';