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

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