关于上传头像

2019-06-20  本文已影响0人  雨泽丶
 <!-- 上传头像 -->
        <div>
          //头像
          <img :src="userInfo.avatar" alt>
        </div>
        点击上传头像按钮
        <p class="upload" @click.stop="uploadHeadImg">上传头像</p>
        隐藏选择文件夹
        <input v-show="false" type="file" accept="image/*" @change="handleFile" class="hiddenInput">
 userInfo: {
        avatar:             默认图片地址  随便啥()
      }
methods: {
    uploadHeadImg: function() {
      this.$el.querySelector(".hiddenInput").click();
    },
    // 将头像显示
    handleFile: function(e) {
      let $target = e.target || e.srcElement;
      let file = $target.files[0];
      var reader = new FileReader();
      reader.onload = data => {
        let res = data.target || data.srcElement;
        this.userInfo.avatar = res.result;
      };
      reader.readAsDataURL(file);
    }
  }
上一篇 下一篇

猜你喜欢

热点阅读