【第27章】Vue实战篇之用户头像修改

---

前言

这里来完成修改用户头像的功能。

---

一、界面搭建

<script setup>import { Plus, Upload } from '@element-plus/icons-vue'
import {ref} from 'vue'
import avatar from '@/assets/default.png'const uploadRef = ref()//用户头像地址
const imgUrl= avatar</script><template><el-card class="page-container"><template #header><div class="header"><span>更换头像</span></div></template><el-row><el-col :span="12"><el-upload ref="uploadRef"class="avatar-uploader" :show-file-list="false"><img v-if="imgUrl" :src="imgUrl" class="avatar" /><img v-else :src="avatar" width="278" /></el-upload><br /><el-button type="primary" :icon="Plus" size="large"  @click="uploadRef.$el.querySelector('input').click()">选择图片</el-button><el-button type="success" :icon="Upload" size="large">上传头像</el-button></el-col></el-row></el-card>
</template><style lang="scss" scoped>
.avatar-uploader {:deep() {.avatar {width: 278px;height: 278px;display: block;}.el-upload {border: 1px dashed var(--el-border-color);border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;transition: var(--el-transition-duration-fast);}.el-upload:hover {border-color: var(--el-color-primary);}.el-icon.avatar-uploader-icon {font-size: 28px;color: #8c939d;width: 278px;height: 278px;text-align: center;}}
}
</style>

二、头像回显

import useUserInfoStore from '@/stores/userInfo.js'const uploadRef = ref()//用户头像地址
const userInfoStore = useUserInfoStore()
const imgUrl= userInfoStore.getUserInfo().userPic?ref(userInfoStore.getUserInfo().userPic):avatar

三、头像上传

1. 自动上传

1.1 表单

<el-upload class="avatar-uploader" :auto-upload="true" action="/api/file/upload/avatar" :name="file" :headers="token" :before-upload="updateBefore" :on-success="uploadSuccess":show-file-list="false"><img v-if="imgUrl" :src="imgUrl" class="avatar" /><img v-else :src="avatar" width="278" />
</el-upload>

1.2 事件

import {useTokenStore} from '@/stores/token.js'//头像上传
const token=ref('')
const updateBefore=()=>{const tokenStore=useTokenStore()if(tokenStore.getToken()){token.value={'Authorization':'Bearer '+tokenStore.getToken()}}
}
const uploadSuccess=(response)=>{imgUrl.value=response.data
}

2. 更新用户头像

2.1 调用接口

export const userAvatarService = (avatar)=>{var params = new URLSearchParams()params.append('avatar', avatar)return request.patch('/user/avatar', params)
}

2.2 界面代码

<el-row><el-col :span="12"><el-upload class="avatar-uploader" :auto-upload="true" action="/api/file/upload/avatar" :name="file" :headers="token" :before-upload="updateBefore" :on-success="uploadSuccess":show-file-list="false"><img v-if="imgUrl" :src="'/avatar/'+imgUrl" class="avatar" /><img v-else :src="avatar" width="278" /></el-upload><br /><el-button type="primary" :icon="Plus" size="large"  @click="uploadRef.$el.querySelector('input').click()">选择图片</el-button><el-button type="success" :icon="Upload" size="large" @click="updateAvatar">上传头像</el-button></el-col>
</el-row>

2.3 事件代码

import { userAvatarService } from '@/api/user.js'
import { ElMessage } from 'element-plus'//更新用户头像
const updateAvatar=async()=>{const result = await userAvatarService(imgUrl.value)const message = result.messageif (result.code == 0) {ElMessage.success(message ? message : '上传成功!')userInfoStore.userInfo.userPic=imgUrl.value} else {ElMessage.error(message ? message : '上传失败,请稍后重试!')}
}

---

总结

回到顶部