vue修改用户的头像并上传,input框结合upload上传

vue修改用户的头像并上传,input框结合upload上传

项目需要更改用户头像并完成上传，查了许多资料自己又更改一下就可以了，以免自己忘记，记录一下

<template>    
      <div class="avtar">
        <h1>个人信息</h1>
        <div class="image-upload-mask" v-if='flag' style="line-height: 125px;">
          <input type="file" title="修改头像" class="hiddenInput" @mouseout='mouseout' name="" accept="image/gif,image/jpeg,image/jpg,image/png" @change="fileChange">
          <i class="fa fa-camera" aria-hidden="true"></i>
            修改头像
        </div>
        <div style="width: 160px; height: 125px;">
          <img class="imgMove" v-if='!flag' @mouseover='mouseover' :src="formBase.headImgurl?`/service/mooc-file-server/file/browse/${formBase.headImgurl}`:require('@/assets/imgs/1.png')" alt="" width='160px' height="125px">
        </div>
      </div>
</template>

<script>
export default{
data(){
flag: false,
  },
methods: {
      //选择图片上传
      fileChange(e) {
        let that = this;
        let fd = new FormData()
        let file = e.target.files[0];
        let reader = new FileReader();
        reader.onload = function (e) {
          that.adatar = e.target.result;
        }
        reader.readAsDataURL(file);
        fd.append('file', file)
        fd.append('fileClass', 'MOOC_VIDEO')
        fileService.upload(fd, (loaded, total) => {
            this.imgProgress = Math.round((loaded / total) * 10000) / 100
          }).then(res => {
            console.log('upload_res', res)
            file.id = res.data.body.id
            this.formBase.headImgurl = res.data.body.id
            this.$toast('文件上传成功')
            file.status = 'done'
          })
          .catch(() => {
            file.status = 'error'
          })
      },
      mouseover(){
        this.flag=true;
      },
      mouseout(){
        this.flag=false;
      }
    }
}
</script>