美食杰—修改个人资料

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

效果展示：

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

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

 

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

代码书写：

<div class="edit-item">
      <span class="label">修改头像</span>
      <upload-img
        imgMaxWidth="210"
        class="avatar-uploader"
        action="/api/upload?type=user"
        :imageUrl="avatar"
        @changeImg='changeImg'>
      </upload-img>
    </div>
    <div class="edit-item">
      <span class="label">修改名称</span>
      <div>
        <el-input v-model="name" class="create-input" placeholder="请输入内容">
          <!-- {{nserInfo.name}} -->
        </el-input>
      </div>
    </div>
    <div class="edit-item">
      <span class="label">个人简介</span>
      <div>
        <el-input v-model="sign" type="textarea" class="create-input" placeholder="请输入内容"></el-input>
      </div>
    </div>
    <div>
      <el-button 
      class="send" 
      type="primary" 
      size="medium"
      @click="save"
    >保存</el-button>
    </div>

在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框架)

<el-upload
    class="avatar-uploader"
    :action="action"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload">
    <img v-if="imageUrl" style="width:210px;" :src="imageUrl" class="avatar">
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>

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;
      }
    }

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