前言：

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

具体实现思路：

在个人主页中点击编辑个人资料进入当前页
引入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-imgaction="/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-inputtype="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-uploadclass="avatar-uploader":action="action":show-file-list="false":on-success="handleAvatarSuccess":before-upload="beforeAvatarUpload"><imgv-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 {// 把显示的图片赋值给 urlurl: this.imageUrl,};},mounted() {// 把显示的图片赋值给 urlthis.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.urlresImgUrl: 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

美食杰项目 -- 编辑个人资料（六）相关推荐

美食杰项目（六）发布菜谱
目录前言具体效果实现的具体功能代码思路主要引入的element ui的具体样式相关代码总结: 前言本节给大家讲的是美食杰项目的发布菜谱的主要功能和具体样式,希望我的代码能够帮助到你,也 ...
美食杰项目 -- 个人主页（四）
目录前言: 具体实现思路: 步骤: 1. 展示美食杰菜谱大全效果 2. 引入element-ui 3. 代码总结: 前言: 本文给大家讲解,美食杰项目中实现个人主页的效果,和具体代码. 具体实现 ...
美食杰项目 -- 发布菜谱（七）
目录前言: 具体实现思路: 步骤: 1. 展示美食杰发布菜谱页效果 2. 引入element-ui 3. 代码总结: 前言: 本文给大家讲解,美食杰项目中实现发布菜谱页的效果,和具体代码. 具体 ...
美食杰项目（五）个人主页
目录前言具体效果代码思路相应组件具体代码总结: 前言本节给大家讲的是美食杰项目的个人主页的主要功能和具体样式,希望我的代码能够帮助到你,也希望你能够看懂具体效果作品和收藏的具体样式( ...
美食杰项目---个人页和他人主页
美食杰项目-个人页和他人主页跳转个人主页. 跳转他人主页. 点击他人关注或取消关注. 点击他人菜谱,粉丝及关注. 效果图展示点击跳转到个人空间,个人空间没有关注和取消关注. 点击个人跳转如下图: ...
美食杰项目 -- 菜品信息（五）
目录前言: 具体实现思路: 步骤: 1. 展示美食杰菜谱大全效果 2. 引入element-ui 3. 代码总结: 前言: 本文给大家讲解,美食杰项目中实现菜品信息页的效果,和具体代码. 具体实 ...
VUE——超详细的美食杰项目—菜谱详情
VUE--超详细的美食杰项目-菜谱详情效果介绍 detail.vue detail-header.vue detail-content.vue comment.vue 效果介绍实现页面数据渲染,还 ...
美食杰项目（四）美食详情页
目录前言: 具体样式实现效果代码思路相应的组件相关代码总结: 前言: 本节给大家讲的是美食杰项目的美食详情页的主要功能和具体样式,希望我的代码能够帮助到你,也希望你能够看懂有所收获具体样 ...
美食杰项目 -- 总结（八）
目录前言: 项目效果展示引入插件说明后台请求代码编写 package.json页面代码 main.js页面代码总结前言: 经过大概一周时间的兴勤劳作,美食杰项目的所有代码已经全部编写完成,功 ...

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

目录

前言：

具体实现思路：

步骤：

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

2. 引入element-ui

3. 代码

总结：

美食杰项目 -- 编辑个人资料（六）相关推荐

最新文章

热门文章