美食杰项目（三）编辑个人资料

前言

• 本节给大家讲的是美食杰项目的首页的主要功能和具体样式

---

具体样式

相应组件

• 这是封装的图片组件，后面还有几个组件需要用到，所以疯转起来
  
• 这是编辑个人资料的组价
  

代码思路

利用element ui框架里面的上传图片的组件功能实现图片的上传
将上传图片的组件封装，方便多次利用
通过接口更改数据
保存跳转到个人主页

相应代码

• 封装的图片代码：

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

<script>
export default {
 // 接受传进来的参数
 props: {
   action: String,
   imageUrl: {
     type: String,
     default: "",
   },
 },
 data() {
   // 将修改的图片传给url
   return {
     url: this.imageUrl,
   };
 },
 // 每次挂载前都要赋值
 mounted() {
   this.url = this.imageUrl;
 },
 methods: {
   // 这些都是element ui里面的方法
   handleAvatarSuccess(res, file) {
     // console.log(res, file);
     this.url = URL.createObjectURL(file.raw);
     // 触发子传父的事件将图片传出
     // console.log(URL.createObjectURL(file.raw));
     this.$emit("changeimg", res.data.url);
     // this.$emit()
   },
   // 图片设置要求
   beforeAvatarUpload(file) {
     const isJPG =
       file.type === "image/jpeg" ||
       file.type === "image/png" ||
       file.type === "image/gif" ||
       file.type === "image/jpg";
     const isLt2M = file.size / 1024 / 1024 < 2;

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

<style>
.avatar-uploader .el-upload {
 border: 1px dashed #d9d9d9;
 border-radius: 6px;
 cursor: pointer;
 position: relative;
 overflow: hidden;
}
.avatar-uploader .el-upload:hover {
 border-color: #409eff;
}
.avatar-uploader-icon {
 font-size: 28px;
 color: #8c939d;
 width: 178px;
 height: 178px;
 line-height: 178px;
 text-align: center;
}
.avatar {
 width: 178px;
 height: 178px;
 display: block;
}
</style>

---

• 编辑个人资料组件相关代码

<template>
  <div class="edit">
    <div class="edit-avatar">
      <span>修改图像</span>
      <!-- 将接受的数据传给图片组件 通过子传父传给图片组件 -->
      <upload-img
        imgMaxWidth="210"
        class="avatar-uploader"
        action="/api/upload/?type=user"
        :imageUrl="avatar"
        @changeimg="changeimg"
      >
      </upload-img>
    </div>
    <div class="edit-name">
      <span>修改名称</span>
      <div>
        <el-input v-model="name" class="create-input" placeholder="请输入内容">
          {{ 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>
  </div>
</template>

<script>
import uploadImg from "@/views/uploadimg/upload-img";
import { userEdit } from "@/connector/api";
export default {
  data() {
    const userInfo = this.$store.state.userInfo;
    return {
      avatar: userInfo.avatar,
      name: userInfo.name,
      sign: userInfo.singn,
    };
  },
  components: {
    uploadImg,
  },
  methods: {
    // 通过async/await状态将用户修改完的数据传进接口
    async save() {
      let data = await userEdit({
        avatar: this.avatar,
        name: this.name,
        sign: this.singn,
      });
      console.log(data);
      // 修改成功跳转到个人主页
      if (data.code == 0) {
        this.$router.push({ name: "space" });
      }
    },
    // 将传进的图片赋值给avatar
    changeimg(i) {
      this.avatar = i;
      console.log(this.avatar);
    },
  },
};
</script>

<style lang="scss" scoped>
.edit {
  width: 990px;
  margin: 0 auto;
  .edit-avatar {
    width: 200px;
    height: 220px;
    span {
      font-size: 14px;
    }
  }
  .edit-name {
    width: 200px;
    height: 100px;
    span {
      font-size: 14px;
    }
  }
  .edit-item {
    width: 200px;
    height: 100px;
    span {
      font-size: 14px;
    }
  }
}
</style>

总结：

以上就是 美食杰项目中编辑个人资料的具体样式和实现方法，不懂得也可以在评论区里问我，以后会持续发布一些新的功能，敬请关注。