前言：
本文给大家讲解，美食杰项目中 实现编辑个人资料页的效果，和具体代码。
具体实现思路：
在个人主页中点击编辑个人资料进入当前页
引入element-ui进行图片的上传
修改完所有信息后
点击保存会对个人资料进行更改
并跳转至个人主页
步骤：
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>
总结：
以上就是 美食杰项目 中 编辑个人资料页的具体实现方法，不懂得也可以在评论区里问我或私聊我询问，以后会持续发布一些新的功能，敬请关注。
