20210924_美食杰-编辑个人资料

①配置路由
在router.(index.js)中配置

①import edit from '@/views/user-space/edit'
import space from '@/views/user-space/space'

②{
        path:'/edit',
        name:'edit',
        title:'个人页',
        component:edit,
    },
    {
        path:'/space',
        name:'space',
        component:space,
    },

编辑个人资料

在内容区域部分

// 在js中配置
import UploadImg from '@/components/upload-img'
import {userEdit} from '@/service/api'
export default {
  components: {UploadImg},
  data(){
    const userInfo = this.$store.state.userInfo;
    console.log(userInfo);
    return {
      avatar:userInfo.avatar,
      name:userInfo.name,
      sign:userInfo.sign
    }
  },
  methods:{
    // 解决异步 async
      async save(){
        // 拿到当前页面数据并发送
        let data = await userEdit({
          avatar:this.avatar,
          name:this.name,
          sign:this.sign
        });
        if(data.code === 0){
          this.$router.push({
            name:'space'
          })
        }
      }
  }
}

上传图片

<template>
  <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>
</template>
<script>
export default {
  props:{
      action:String,
      maxSize:{
        type:Number,
        default:2
      },
      imageUrl:{
        type:String,
        default:''
      },
      imgMaxWidth:{
        type:[Number,String],
        default:'auto'
      }
      // 对象接收可以限制默认值和限制类型，默认值可以是具体的数组或函数
      // 数组接收直接接收了
  },
  data(){
    return {

    }
  },
   methods: {
    //  图片上传成功之后
      handleAvatarSuccess(res, file) {
        
        // 在imgurl里面存放了数据，返回一个值
        // 把图片路径处理成一个字符串，存放在组件路径中，组件路径通过字符串来显示
        if(res.code === 1){
          this.$message({
            message:res.mes,
            type:'warning'
          });
          return;
        }
        this.imageUrl = URL.createObjectURL(file.raw);
        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!');
        }
        return isJPG && isLt2M;
      }
    }
  }
</script>

总结：先在配置路由然后再内容区域部分，设置图片的最大宽度，请求接口参数，图片展示，在js中配置,使用async可以解决一些异步问题，然后拿到页面数据并发送，接着上传图片，如果图片上传成功，在imgurl里面存放了数据，返回一个值，把图片路径处理成一个字符串，存放在组件路径中，组件路径通过字符串来显示