美食杰-编辑个人资料

一、介绍

美食杰的编辑个人资料是在成功登录后，修改个人资料

页面展示：

二、过程

1.进行页面渲染，这里用到了element组件库，修改名称和个人简介直接用v-model双向数据绑定就可以

<div class="edit">
    <div class="edit-item">
      <span class="label">修改头像</span>
      <upload-img
        imgMaxWidth="210"
        action='/api/upload?type=user'
        :imageUrl='avatar'
        @res-url='(data)=>{avatar=data.resImgUrl}'
      ></upload-img>
    </div>
    <div class="edit-item">
      <span class="label">修改名称</span>
      <div>
        <el-input v-model="name" class="create-input" placeholder="请输入内容"></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>
  </div>

因为上传图片，在别的地方也会用到，所以创建了一个单独的组件upload-img，这里使用的是element组件：

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

通过props获取父组件传递的参数，这里用的是对象：

props:{
    action:String,
    maxSize:{
      type:Number,
      default:2
    },
    imageUrl:{
      type:String,
      default:''
    },
    imgMaxWidth:{
      type:[Number,String],
      default:'auto'
    }
  },

图片上传在upload-img组件里触发handleAvatarSuccess（图片上传之后）和beforeAvatarUpload（图片上传）两个element的参数，来进行判断是否符合条件，上传之后调用父组件edit的‘gai’方法，让图片显示：

// 图片上传之后
      handleAvatarSuccess(res, file) {
        console.log(res,file);
        if(res.code===1){
          this.$message({
            message:res.mes,
            type:'warning'
          })
          return
        }
        this.$emit('gai',URL.createObjectURL(file.raw))
        console.log(this.imageUrl);
        this.$emit('res-url',{
          resImgUrl:res.data.url
        })
      },
      // 图片上传之前
      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!');
        }
        console.log(file);
        return isJPG && isLt2M;
      }

总结：

到这里编辑个人资料就结束了，谢谢观看！