正常我们上次图片
html
<input @change="toBase64($event)" type="file" accept="image/*" />
js
toBase64(e){ let that = this; let files = e.target.files[0]; let reader = new FileReader(); reader.readAsDataURL(files); reader.onload = function(){ let imgcode = this.result.replace(/^data:image\/(jpeg|png|gif|jpg|bmp);base64,/, ‘‘); //下面请求接口,返回图片路径,然后赋值显示
_this.$axios.post(‘接口地址‘,{
filename:files.name,
file_base64:imgcode,
}).then(res=>{
//赋值。。。。。
})
}
}
正常如上的操作是没有问题的,可是,当你删除图片之后,你想要重新上传,如果选择的是删除的那张图片,那么图片是显示出来的。
因为标签中change方法根据input的value来判断的。当你选了相同图片的时候,value其实是没有变化的,所以方法都没有触发。
所以需要在赋值之后。把这个节点的value清空,只需要加上
e.target.value = ‘‘;
当然,很多功能还是需要根据需求来敲定的。