vue上传头像+进度条

<template xmlns:v-on="">
    <div style="background: #fff;">
     <!--<div class="grzl_txtk" >
     <div class="bag_mengc" @click="sssToggle()"></div>
     <div class="grzl_txtk_br">
      <ul>
       <li>
        <div class="grzl_txtk_br_q">
         <img src="/static/img/cam.png"/>
         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
         <span>拍照上传</span>
        </div>
       <li>
        <div class="grzl_txtk_br_w">

         <img src="/static/img/image_xc.png"/>
         &nbsp;&nbsp;&nbsp;&nbsp;
         <span class="grzl_txtk_br_span">从相册中选择</span>
        </div>
        <input type="file" style="width: 100%;height: 50px;position: absolute;top: 50px;left: 0px;opacity: 0;"/>
       </li>
       <li @click="sssToggle()">
        <div class="grzl_txtk_br_e">
         <img  src="/static/img/image_sc.png"/>
         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
         <span>取消</span>
        </div>
       </li>
      </ul>
     </div>
    </div>-->
    <!--头像弹出框-->
      <div class="personal">
        <ul>
          <li class="personal_q">
            <p>头像</p>
            <div class="personal_file" >
              <p @click="fileClick()"></p>
              <img :src="global.imgUrl+user.museImage"   id="paymentLogoimg" @click="fileClick()">
              <input type="file" id="myBlogImage" @change="getFile($event)" />
              <input type="hidden" id="museImage" v-model="img" value=""  />
            </div>
          </li>
          <li class="personal_w">
            <div class="personal_fl">
              <p>姓名</p>
            </div>
            <div class="personal_fr">
              <input type="text"  v-model="name" />
            </div>
          </li>
          <li class="personal_e">
            <div class="personal_fl">
              <p>性别</p>
            </div>
            <div class="personal_fr">
              <span :class="sex==2?'sex sex_boy':'sex sex_girl'" @click="upSex($event)"></span>
              <input type="hidden"  v-model="sex" />
            </div>
          </li>
          <li class="personal_r personal_del">
            <div class="personal_fl">
              <p>联系方式</p>
            </div>
            <div class="personal_fr">
              <input type="text"  v-model="phone" readonly>
            </div>
          </li>
          <li class="personal_r personal_dq">
            <div class="personal_fl">
              <p>地区</p>
            </div>
            <div class="personal_fr">
              <input type="hidden" v-model="address" >
              <!--  <span data-city-code="500100" data-province-code="500000" data-district-code="500112" id="show_contact" @click="showSelect">重庆市 重庆市 渝北区</span>-->
              <mt-cell :value="address" is-link @click.native="handlerArea"></mt-cell>
              <mt-popup v-model="areaVisible" class="area-class" position="bottom">
                <mt-picker :slots="slots" @change="onValuesChange"></mt-picker>
              </mt-popup>
            </div>
          <!--  <mt-popup v-model="areaVisible" class="area-class" position="bottom">
              <mt-picker :slots="slots" @change="onValuesChange"></mt-picker>
            </mt-popup>-->
          </li>
        </ul>
        <input class="inp-btn" type="button" value="保存" @click="save()">
      </div>

      <div class="showBool_modal" v-show="showBool">
        <div  class="modal"></div>
        <mt-progress  :value="progress" :bar-height="10" >
          <div slot="end">{{progress}}%</div>
        </mt-progress>
      </div>

    </div>
</template>
<script>
  import {personalData} from "../../resources";
  import {Auth} from "../../resources";
  import $ from "jquery";
  import  {area} from '../../../static/js/areaData_v2'
  import data from '../../assets/data.json'
  let index = 0
  let index2 = 0
  let index3 = 0
  // 初始化省
  let province = data.map(res => {
    return res.name
  })
  // 初始化市
  let city = data[index].childs.map(res => {
    return res.name
  })
  // 初始化区
  let areas = data[index].childs[index2].childs.map(res => {
    return res.name
  })
  export default {
    data: () => ({
      progress:0,
      showBool:false,
      user:{},
      name:"",
      phone:"",
      sex:'',
      id:'',
      img:"",
      areaVisible: false,
      address: '请选择',
      slots: [{
        flex: 1,
        values: province,
        className: 'slot1',
        textAlign: 'left'
      }, {
        divider: true,
        content: '-',
        className: 'slot2'
      }, {
        flex: 1,
        values: city,
        className: 'slot3',
        textAlign: 'left'
      }, {
        divider: true,
        content: '-',
        className: 'slot4'
      }, {
        flex: 1,
        values: areas,
        className: 'slot5',
        textAlign: 'left'
      }],
    }),
   /* components: {
      'mt-picker': Picker
    },*/
    beforeRouteEnter(to,from,next){
      next(vm=>{
        vm.listData=area
        Auth.getMember().then(res=>{
          console.log(res.data)
          vm.user=res.data.result
          vm.name=vm.user.museNickName//回显昵称
          vm.phone=vm.user.musePhone
          vm.id=vm.user.museId
          vm.img=vm.user.museImage
          vm.address=vm.user.museAddress
          if(vm.user.museSex==2){
            vm.sex=vm.user.museSex
          }else if(vm.user.museSex==1){
            $(".personal .personal_e .personal_fr span.sex").addClass('sex_girl').removeClass('sex_boy')
            vm.sex=vm.user.museSex
          }
        })
      })

    },
    methods:{
      showSelect(){
        this.Hidden = true;
      },
      showHidden(content){
        this.Hidden = content;
      },
      save(){
        var img = this.img;
        if(!img){
          this.$layer.msg("请添加头像");
          return;
        }

        var name = this.name;
        if(!name){
          this.$layer.msg("请输入姓名");
          return;
        }

        var sex = this.sex;
        if(!sex){
          this.$layer.msg("请选择性别");
          return;
        }

   /*     var phone = this.phone;
        if(!phone){
          this.$layer.msg("请填写联系方式");
          return;
        }*/

        var address = this.address;
        if(!address){
          this.$layer.msg("请选择地址");
          return;
        }

       personalData.personal(this.$data).then(res=>{
            if(res.data.flag){
              this.$router.push("/person")
            }
        })
      },upSex(even){
        if($(even.target).hasClass('sex_boy')){
          this.sex=1;
        }else {
          this.sex=2;
        }
      },
      getFile: function (even) {
        this.progress=0
        this.showBool=true

        let file = event.target.files[0];
        let zipFormData = new FormData();
        let config = {
          onUploadProgress: progressEvent => {
            let complete = (progressEvent.loaded / progressEvent.total * 100 | 0)
            this.progress = complete
          }
        }
        zipFormData.append('file',file);//filename是键，file是值，就是要传的文件，test.zip是要传的文件名
        //this.uping = 1;
        this.$upload.post('',zipFormData,config).then(res=> {
          if(res.data.state){
            $("#paymentLogoimg").attr("src",res.data.url)
            this.img=res.data.title
            this.showBool=false
          }else {
            this.$layer.msg("上传失败", {offset: "rb"})
          }
        });
      },
      fileClick() {
        document.getElementById('myBlogImage').click()
      },
      onValuesChange(picker, values) {
        let one = values[0]
        let two = values[1]
        let three =values[2]
        index = province.indexOf(one)
        if (index >= 0 && province.length > 0) {
          city = data[index].childs.map(res => {
            return res.name
          })
          picker.setSlotValues(1, city)
          two = values[1]
        }
        index2 = city.indexOf(two)
        if (index2 >= 0 && city.length > 0) {
          areas = data[index].childs[index2].childs.map(res => {
            return res.name
          })
          picker.setSlotValues(2, areas)
          three = values[2]
        }
      /*  index3 = areas.indexOf(three)
        if (index >= 0 && index2 >= 0 && index3 >= 0) {
          street = data[index].childs[index2].childs[index3].childs.map(res => {
            return res.name
          })
          this.slotstree[0].values = street
        }*/

        /*if (index2 === -1 || index3 === -1) {
          this.streetString = '无可选街道'
        }*/
        this.address = values.join(' ')
      },
      handlerArea() {
        this.areaVisible = true
      }

    },
  }
  $(function () {
    $('.personal .personal_e .personal_fr span.sex').on('click',function(){
      if($(this).hasClass('sex_boy')){
        $("#sex").val("2")
        $(this).addClass('sex_girl').removeClass('sex_boy');
      }else {
        $("#sex").val("1")
        $(this).addClass('sex_boy').removeClass('sex_girl');
      }
    })
  })
</script>

<style >
  #myBlogImage{
    display: none;
  }.area-class {
     width: 100%;
     height: 30%;

   }
  .mint-cell-allow-right::after{
   border: none;
  }
  .mint-popup{
   height: 270px;
  }
  .picker-items{
   height: 270px;
  }
</style>