文章目录
- 前言
- 一、界面搭建
- 二、头像回显
- 三、头像上传
- 1. 自动上传
- 1.1 表单
- 1.2 事件
- 2. 更新用户头像
- 2.1 调用接口
- 2.2 界面代码
- 2.3 事件代码
- 总结
前言
这里来完成修改用户头像的功能。
一、界面搭建
<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.message
if (result.code == 0) {
ElMessage.success(message ? message : '上传成功!')
userInfoStore.userInfo.userPic=imgUrl.value
} else {
ElMessage.error(message ? message : '上传失败,请稍后重试!')
}
}
总结
回到顶部