zoukankan      html  css  js  c++  java
  • 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 = '';

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

  • 相关阅读:
    jar命令
    python的实例方法,类方法和静态方法区别
    修饰器学习
    人生感悟的句子
    html+css学习
    url编码
    正向代理和反向代理
    web基础
    dns解析域名过程
    关于csrf
  • 原文地址:https://www.cnblogs.com/chao202426/p/12971262.html
Copyright © 2011-2022 走看看