首先我们先从vuex中拿到没修改之前的头像,名字,个人简介,判断登录页的token合不合法。
<div class="edit-item">
<span class="label">修改头像</span>
<upload-img
imgMaxWidth="210"
action="/api/upload?type=user"
:imageUrl="avatar"
@res-url="
(data) => {
avatar = data.resImgUrl;
}
"
></upload-img>
</div>
<div class="edit-item">
<span class="label">修改名称</span>
<div>
<el-input v-model="name" class="create-input" placeholder="请输入内容">
</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>
然后再开始我们的修改数据
async save() {
//告诉服务器保存新的数据
let data = await userEdit({
avatar: this.avatar,
name: this.name,
sign: this.sign,
});
console.log(data);
//保存成功后 跳转到新的页面
if (data.code === 0) {
this.$router.push({
name: "space",
});
}
}
这样就完成我们的效果了