美食杰项目编辑个人资料以及用户头像内容介绍

这个项目写这么长时间了,怎么还没有小伙伴问我呢,那看来是我写的还是不够好呀,
看来我要请出伟大的逻辑天才为大家讲解今天的内容,(崎仕㡱氏沃兹迹)其实就是我自己啦.
开个玩笑,不废话了,开始正题吧 ,先上图

上图的点击事件已经写过啦,在我之前的作品中,可以去哪里看一下,在个人空间里
顾名思义就是点击这里跳转到个人首页,接着上图

效果就是这样的
代码如下

这是需要绑定数据,传入图片
下图就是渲染页面

然后在upload-img中设置用户头像大小及图片格式
代码如下

export default {
  props:{
    action:String,
    imageUrl:{
      typeof:String,
      default:'',
    },
    imgMaxWidth:{//图片的最大宽
      type:[Number,String],
      default:'auto'
    },
    maxSize:{//图片格式的大小
      type:Number,
      default:2
    }
  },
  data(){
    return {
      url:this.imageUrl
    }
  },
  methods: {
    // 上传文件之前执行的方法
    beforeAvatar(file){
      console.log(file)
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/gif';
      const isLt2M = file.size / 1024 / 1024 < this.maxSize;
      if(!isJPG){//判断图片格式
        this.$message.error('上传的只能是jpeg或者是gif格式的图片');
      }
      if(!isLt2M){//图片大小
        this.$message.error('上传的图片大小不能超过2M');
      }
      return isJPG && isLt2M 
    },
    // 上传文件成功后,执行的方法
    avatarSuccess(res,file){
      console.log(res);
      if(res.code === 1){
        this.$message({
          message:res.mes,
          type:'warning'
        });
        return;
      }
      // 新的图片地址传给父级
      console.log(res)
      this.url = URL.createObjectURL(file.raw);
      this.$emit('res-url',{
        // resImgUrl:res.data.url
        resImgUrl:this.url
      })
    }
  }
}

这样用户头像就可以加入图片显示出来啦,
效果图如下

**

感兴趣的小伙伴可以去试一下

**