fix: 修改头像预览,头像上传bug,以及黄色报错问题;

This commit is contained in:
yangws 2024-07-18 10:45:33 +08:00
parent 6d394eb94e
commit 412e0a01ac
3 changed files with 28 additions and 18 deletions

View File

@ -7,7 +7,7 @@ export function getUserProfile() {
method: 'get' method: 'get'
}) })
} }
// 修改用户个人信息 // 修改用户个人信息
export function updateUserProfile(data) { export function updateUserProfile(data) {
return request({ return request({
@ -16,7 +16,7 @@ export function getUserProfile() {
data: data data: data
}) })
} }
// 用户密码重置 // 用户密码重置
export function updateUserPwd(oldPassword, newPassword) { export function updateUserPwd(oldPassword, newPassword) {
const data = { const data = {
@ -29,11 +29,14 @@ export function getUserProfile() {
params: data params: data
}) })
} }
// 用户头像上传 // 用户头像上传
export function uploadAvatar(data) { export function uploadAvatar(data) {
return request({ return request({
url: '/system/user/profile/avatar', url: '/system/user/profile/avatar',
headers: {
'Content-Type': 'multipart/form-data'
},
method: 'post', method: 'post',
data: data data: data
}) })
@ -46,4 +49,4 @@ export function updateUserInfo(data) {
method: 'put', method: 'put',
data: data data: data
}) })
} }

View File

@ -26,7 +26,7 @@
</el-col> </el-col>
<el-col :xs="24" :md="12" :style="{ height: '350px' }"> <el-col :xs="24" :md="12" :style="{ height: '350px' }">
<div class="avatar-upload-preview"> <div class="avatar-upload-preview">
<img :src="options.previews.url" :style="options.previews.img" /> <el-image style="width: 100px; height: 100px" :src="options.previews.url" :style="options.previews.img"/>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
@ -64,7 +64,7 @@
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script setup> <script setup>
import { Upload, Plus, Minus, RefreshLeft, RefreshRight } from '@element-plus/icons-vue' import { Upload, Plus, Minus, RefreshLeft, RefreshRight } from '@element-plus/icons-vue'
import { ref, reactive, getCurrentInstance } from 'vue' import { ref, reactive, getCurrentInstance } from 'vue'
@ -72,6 +72,7 @@ import 'vue-cropper/dist/index.css'
import { VueCropper } from 'vue-cropper' import { VueCropper } from 'vue-cropper'
import { uploadAvatar } from '@/api/system/user' import { uploadAvatar } from '@/api/system/user'
import useUserStore from '@/store/modules/user' import useUserStore from '@/store/modules/user'
import { ElMessage } from 'element-plus'
const userStore = useUserStore() const userStore = useUserStore()
const { proxy } = getCurrentInstance() const { proxy } = getCurrentInstance()
@ -117,7 +118,10 @@ function changeScale(num) {
/** 上传预处理 */ /** 上传预处理 */
function beforeUpload(file) { function beforeUpload(file) {
if (file.type.indexOf('image/') == -1) { if (file.type.indexOf('image/') == -1) {
proxy.$modal.msgError('文件格式错误,请上传图片类型,如JPGPNG后缀的文件。') ElMessage({
message: '文件格式错误,请上传图片类型,如JPGPNG后缀的文件。',
type: 'error',
})
} else { } else {
const reader = new FileReader() const reader = new FileReader()
reader.readAsDataURL(file) reader.readAsDataURL(file)
@ -135,7 +139,10 @@ function uploadImg() {
open.value = false open.value = false
options.img = import.meta.env.VITE_APP_BASE_API + response.imgUrl options.img = import.meta.env.VITE_APP_BASE_API + response.imgUrl
userStore.avatar = options.img userStore.avatar = options.img
proxy.$modal.msgSuccess('修改成功') ElMessage({
message: '上传成功',
type: 'success',
})
visible.value = false visible.value = false
}) })
}) })
@ -150,7 +157,7 @@ function closeDialog() {
options.visible = false options.visible = false
} }
</script> </script>
<style lang='scss' scoped> <style lang='scss' scoped>
.user-info-head { .user-info-head {
position: relative; position: relative;
@ -179,4 +186,4 @@ function closeDialog() {
height: 120px; height: 120px;
width: auto; width: auto;
} }
</style> </style>

View File

@ -11,16 +11,16 @@
</el-form-item> </el-form-item>
<el-form-item label="性别"> <el-form-item label="性别">
<el-radio-group v-model="user.sex"> <el-radio-group v-model="user.sex">
<el-radio label="0"></el-radio> <el-radio value="0"></el-radio>
<el-radio label="1"></el-radio> <el-radio value="1"></el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="任教学科"> <el-form-item label="任教学科">
<el-radio-group v-model="user.edusubject"> <el-radio-group v-model="user.edusubject">
<template v-for="item in subjectList"> <template v-for="(item,index) in subjectList" :key="index">
<el-radio v-if="item.edustage == user.edustage" :label="item.itemtitle">{{ <el-radio v-if="item.edustage == user.edustage" :value="item.itemtitle">
item.itemtitle {{item.itemtitle }}
}}</el-radio> </el-radio>
</template> </template>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
@ -29,7 +29,7 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
</template> </template>
<script setup> <script setup>
import { ref, getCurrentInstance } from 'vue' import { ref, getCurrentInstance } from 'vue'
import { updateUserProfile } from '@/api/system/user' import { updateUserProfile } from '@/api/system/user'
@ -101,4 +101,4 @@ function submit() {
} }
}) })
} }
</script> </script>