vue - 解决input上传文件选择同一文件时change事件不会触发的问题
js -解决使用input上传文件选择同一文件时change事件不会触发的问题
·
问题:
在文件上传的时候我们通常选择监控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;
更多推荐
已为社区贡献16条内容
所有评论(0)