vue移动端上传头像

屏幕快照 2018-09-09 08.09.26.png
        <a class="db pr con bgw">
          头像
          <span class="r set-head" @click.stop="uploadHeadImg">
              <img class="set-head-icon" :src="avatar" style="width: 40px;height: 40px;">
            </span>
          <input type="file" accept="image/*" @change="handleFile" class="hiddenInput dn"/>
        </a>

style

  .set-head {
    position: relative;
    top: .7em;
  }
  .set-head-icon {
    width: 2em;
    border-radius: 50%;
  }
  .dn {
    display: none;
  }
  • 如不设置display:none,就会是如下效果


    屏幕快照 2018-09-09 08.31.05.png
  • input标签的accept属性
    <input type="file" name="header_img" accept="image/gif,image/jpeg,image/png,image/jpg">
data(){
  return {
    avatar:''
  }
},
watch: {
       avatar() {
        this.$http.get('api/set', {params: {"avatar": this.avatar}}).then(res => {
          let j = res.data;
          if (j.code == 200) {
            this.avatar = j.data.avatar;
          }
        })
      }
},
mounted() {
  require('./jquery.min');
},
// 打开图片上传
      uploadHeadImg: function () {
        this.$el.querySelector('.hiddenInput').click()
      },
      // 将头像显示
      handleFile: function (e) {
        let $target = e.target || e.srcElement;
        let file = $target.files[0];
        let param = new FormData(); //创建form对象
        param.append('file', file, file.name);//通过append向form对象添加数据
        param.append('chunk', '0');//添加form表单中其他数据
        let config = {
          headers: {'Content-Type': 'multipart/form-data'}
        };  //添加请求头
        this.$http.post("api/upload", param, config).then(res => {
          var j = res.data;
          if (j.code === 200) {
            this.avatar = j.data[0];
            this.$tip("头像上传成功!");
          }
        })
      }

推荐阅读更多精彩内容

  • pyspark.sql模块 模块上下文 Spark SQL和DataFrames的重要类: pyspark.sql...
    mpro阅读 6,640评论 0 11
  • 一、使用真实手机测试未发布网页的方法 方法① 在虚拟机中搭建xampp,将文件通过FTP传到虚拟机,在一个局域网中...
    fastwe阅读 156评论 0 0
  • 1、垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,...
    kiddings阅读 1,730评论 0 10
  • "use strict";function _classCallCheck(e,t){if(!(e instanc...
    久些阅读 1,018评论 0 1
  • 本书介绍 你是不是对Django的学习感到迷茫?是不是对网上零星的教程感到绝望?是不是苦于没有可以迅速上手的实例而...
    阡陌3536阅读 674评论 0 0