input上传图片的坑

正常我们上次图片

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 = ‘‘;

当然,很多功能还是需要根据需求来敲定的。

 

input上传图片的坑

上一篇:Ext.NET 基础学习笔记03 (Ext.Net 布局)


下一篇:JSON方法