关于上传头像

 <!-- 上传头像 -->
        <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);
    }
  }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容