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

前言：

本文给大家讲解，美食杰项目中 实现编辑个人资料页的效果，和具体代码。

---

具体实现思路：

1. 在个人主页中点击编辑个人资料进入当前页
2. 引入element-ui进行图片的上传
3. 修改完所有信息后
4. 点击保存会对个人资料进行更改
5. 并跳转至个人主页

---

步骤：

1. 展示美食杰编辑个人资料效果

美食杰编辑个人资料

---

2. 引入element-ui

点击跳转至 element-ui 中 Upload 上传使用方法：https://element.eleme.cn/#/zh-CN/component/upload

点击跳转至 element-ui 中 MessageBox 弹框使用方法：https://element.eleme.cn/#/zh-CN/component/message-box

---

3. 代码

element-ui 中 Upload 上传 功能要单独封装一个组件，因为它需要在发布菜谱页面中使用
其他的在代码中写有注释，按注释理解即可，不了解的也可以在评论区里问我，或者私聊我询问

• 修改个人资料页

<template>
  <div class="box">
    <div class="one">
      <p>修改头像</p>
      <!-- action 图片上传的地址 :imageUrl 显示图片传递到子组件 @res-url 子传父-->
      <upload-img
        action="/api/upload/?type=user"
        :imageUrl="avatar"
        @res-url="image"
        :imgMaxWidth="210"
      ></upload-img>
    </div>
    <div class="two">
      <p>修改名称</p>
      <input type="text" v-model="name" />
    </div>
    <div class="three">
      <p>个人简介</p>
      <el-input
        type="textarea"
        :rows="5"
        :cols="500"
        placeholder="请输入内容"
        v-model="sign"
        class="textarea"
        v-if="$store.getters.islogin"
      >
      </el-input>
    </div>
    <button class="btn" @click="save">保存</button>
  </div>
</template>

<script>
// 引入修改个人资料接口
import { userEdit } from "@/connector/api";
import UploadImg from "@/views/uploadImg/upload_img.vue";
export default {
  components: {
    // 子组件
    UploadImg,
  },
  data() {
    return {
      // 显示图片
      avatar: "",
      // 账号名称
      name: "",
      // 个人简介
      sign: "",
    };
  },
  // 事件监听，跳转页面时触发
  watch: {
    $route: {
      handler() {
        // 获取到内容并进行赋值
        this.avatar = this.$store.state.userInfo.avatar;
        this.name = this.$store.state.userInfo.name;
        this.sign = this.$store.state.userInfo.sign;
      },
      immediate: true,
    },
  },
  methods: {
    // 点击修改
    async save() {
      // 修改个人资料接口
      const data = await userEdit({
        avatar: this.avatar,
        name: this.name,
        sign: this.sign,
      });
      // console.log(data);
      if (data.code === 0) {
        // 跳转至个人主页
        window.location.href = "/MyHomepage";
      }
    },
    image(data) {
      // 子传父，触发的事件，改变显示的图片
      this.$nextTick(function () {
        this.avatar = data.resImgUrl;
        // console.log(this.avatar);
        this.$forceUpdate();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 990px;
  background-color: #fff;
  margin: 20px auto 0;
  padding: 20px;
  div {
    display: flex;
    margin: 10px 0;
    p {
      margin-right: 20px;
    }
    .textarea {
      width: 200px;
      height: 70px;
    }
  }
  .btn {
    padding: 10px 20px;
    background-color: rgb(77, 145, 247);
    border: none;
  }
}
</style>

• 上传图片页

<template>
  <el-upload
    class="avatar-uploader"
    :action="action"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload"
  >
    <img
      v-if="url"
      :src="url"
      class="avatar"
      :style="{ maxWidth: imgMaxWidth + 'px' }"
    />
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>
</template>

<script>
export default {
  props: {
    // 接收父组件传递过来的事件
    action: String, // 图片上传的地址
    imageUrl: {
      // 显示的图片
      type: String,
      default: "",
    },
    imgMaxWidth: {
      //图片的宽
      type: [Number, String],
      default: "auto",
    },
    maxSize: {
      //图片格式的大小
      type: Number,
      default: 2,
    },
  },
  data() {
    return {
      // 把显示的图片赋值给 url
      url: this.imageUrl,
    };
  },
  mounted() {
    // 把显示的图片赋值给 url
    this.url = this.imageUrl;
  },
  methods: {
    // 上传成功时执行的事件
    handleAvatarSuccess(res, file) {
      // console.log(res, file);
      if (res.code === 1) {
        // 返回失败的结果
        this.$message({
          message: res.mes,
          type: "warning",
        });
        return;
      }
      // 获取上传成功后的图片地址
      this.url = URL.createObjectURL(file.raw);
      this.$emit("res-url", {
        // 子传父，触发
        // resImgUrl:res.data.url
        resImgUrl: res.data.url,
      });
    },
    // 上传文件前
    beforeAvatarUpload(file) {
      // 图片上传的格式
      const isJPG = file.type === "image/jpeg" || "image/gif";
      // 图片上传的大小
      const isLt2M = file.size / 1024 / 1024 < this.maxSize;
      // 判断
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      // 返回
      return isJPG && isLt2M;
    },
  },
};
</script>

<style lang="scss" scoped>
.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>

---

总结：

以上就是 美食杰项目 中 编辑个人资料页的具体实现方法，不懂得也可以在评论区里问我或私聊我询问，以后会持续发布一些新的功能，敬请关注。
我的其他文章：https://blog.csdn.net/weixin_62897746?type=blog