美文网首页
关于上传头像

关于上传头像

作者: 雨泽丶 | 来源:发表于2019-06-20 16:51 被阅读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);
    }
  }

相关文章

  • 关于上传头像

  • AndroidHeadImageCliper

    GIT地址 功能描述:头像上传在APP中是很常见的功能,但是关于头像上传前的图片裁剪方式,如果使用系统提供的裁剪方...

  • 图片上传与ajax打包form里面的数据

    目录 头像上传的前端处理 头像上传的后端处理 ajax打包form里面的数据 1. 头像上传的前端处理 需求: 效...

  • 移动端上传头像

    上传头像

  • 纯前端实现截图生成头像

    上传头像插件 目的: 帮助开发者快速开发上传头像功能点 背景: 现在b,g能搜到的头像上传插件并不太好用,所以想提...

  • 开发经验总结

    1.头像上传功能 1.拍照或从相册选择, 头像上传。 头像修改成功之后,需要把头像image保存到沙盒。 每次页面...

  • 上传头像

    背景 在小米的面试中,最后一轮被问到了一个场景。即关于在 WebView 下开发一个用户上传头像的场景的完整流程。...

  • 上传头像

    在 User 类中增加字段: 注意:数据库中 user_image 中存储的是图片的路径,而非文件实体,所以数据类...

  • 上传头像

    //创建button和imageView -(void)createUI{ _headImageView = [F...

  • 上传头像

    NSString *base64string=[imagedata base64Encoding];

网友评论

      本文标题:关于上传头像

      本文链接:https://www.haomeiwen.com/subject/ryujqctx.html