美食杰—修改个人资料

今天我们来看一个非常简单的修改个人资料

效果展示：

首先用户名最初是oo，且没有上传头像，头部名字和标题名一样。

 然后点击编辑个人资料，在表单里面修改名称为圈圈，并且上传图片，设计个人简介。

 保存之后，用户名，头像，简介改变，且跳转到目标页面

代码书写：

      修改头像
      
      
    
    
      修改名称
      
        
          {nserInfo.name}} -->
        
      
    
    
      个人简介
      
        
      
    
    
      保存
    

在input框绑定v-model事件，方便拿到用户输入的值。(用的是Element UI框架，详细用法请移步官方文档)

然后在js中写入方法

data(){
    const userInfo=this.$store.state.userInfo;//获取vuex里面的数据，每次用户名都会存储在这里
    return {
      avatar:userInfo.avatar,//获取图片
      name:userInfo.name,//获取用户名
      sign:userInfo.sign//获取个人简介
    }
  },
  methods:{
    async save(){
      let data=await userEdit({
        avatar:this.avatar,//渲染图片
        name:this.name,//渲染用户名
        sign:this.sign//渲染个人简介
      });
      if(data.code===0){//渲染成功后，跳转页面
        this.$router.push({
          name:'space'//目标页面
        })
      }
    },
    changeImg(ii){
      this.avatar = ii//接收子组件的图片
    }
  }

注意：图片在子组件中修改！！(依旧是Element UI框架)

js复制Element UI方法

props:{//父组件传过来的值
    action:String,
    imageUrl:{
      type:String,
      default:''
    }
  },
  data(){
    return {

    }
  },
  methods: {//Element UI框架
    handleAvatarSuccess(res, file) {
        this.$emit('changeImg',URL.createObjectURL(file.raw))//向父组件传值
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
    }

欧了！！！加油敲代码吧！！冲鸭！！