fix:前端上传头像名称取值错误以及用户保存个人信息时还使用的是旧的头像数据
This commit is contained in:
@ -20,7 +20,7 @@ export const useUpload = (directory?: string) => {
|
||||
// 模式一:前端上传
|
||||
if (isClientUpload) {
|
||||
// 1.1 生成文件名称
|
||||
const fileName = await generateFileName(options.file)
|
||||
const fileName = options.filename
|
||||
// 1.2 获取文件预签名地址
|
||||
const presignedInfo = await FileApi.getFilePresignedUrl(fileName, directory)
|
||||
// 1.3 上传文件(不能使用 ElUpload 的 ajaxUpload 方法的原因:其使用的是 FormData 上传,Minio 不支持)
|
||||
@ -32,7 +32,7 @@ export const useUpload = (directory?: string) => {
|
||||
})
|
||||
.then(() => {
|
||||
// 1.4. 记录文件信息到后端(异步)
|
||||
createFile(presignedInfo, options.file)
|
||||
createFile(presignedInfo, options.file,fileName)
|
||||
// 通知成功,数据格式保持与后端上传的返回结果一致
|
||||
return { data: presignedInfo.url }
|
||||
})
|
||||
@ -64,15 +64,15 @@ export const useUpload = (directory?: string) => {
|
||||
/**
|
||||
* 创建文件信息
|
||||
* @param vo 文件预签名信息
|
||||
* @param name 文件名称
|
||||
* @param file 文件
|
||||
* @param fileName
|
||||
*/
|
||||
function createFile(vo: FileApi.FilePresignedUrlRespVO, file: UploadRawFile) {
|
||||
function createFile(vo: FileApi.FilePresignedUrlRespVO, file: UploadRawFile, fileName: string) {
|
||||
const fileVo = {
|
||||
configId: vo.configId,
|
||||
url: vo.url,
|
||||
path: vo.path,
|
||||
name: file.name,
|
||||
name: fileName,
|
||||
type: file.type,
|
||||
size: file.size
|
||||
}
|
||||
|
||||
@ -78,6 +78,21 @@ const schema = reactive<FormSchema[]>([
|
||||
}
|
||||
])
|
||||
const formRef = ref<FormExpose>() // 表单 Ref
|
||||
|
||||
// 监听 userStore 中头像的变化,同步更新表单数据
|
||||
watch(
|
||||
() => userStore.getUser.avatar,
|
||||
(newAvatar) => {
|
||||
if (newAvatar && formRef.value) {
|
||||
// 直接更新表单模型中的头像字段
|
||||
const formModel = formRef.value.formModel
|
||||
if (formModel) {
|
||||
formModel.avatar = newAvatar
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
const submit = () => {
|
||||
const elForm = unref(formRef)?.getElFormRef()
|
||||
if (!elForm) return
|
||||
|
||||
@ -49,18 +49,31 @@
|
||||
<script lang="ts" setup>
|
||||
import { formatDate } from '@/utils/formatTime'
|
||||
import UserAvatar from './UserAvatar.vue'
|
||||
import { useUserStore } from '@/store/modules/user'
|
||||
|
||||
import { getUserProfile, ProfileVO } from '@/api/system/user/profile'
|
||||
|
||||
defineOptions({ name: 'ProfileUser' })
|
||||
|
||||
const { t } = useI18n()
|
||||
const userStore = useUserStore()
|
||||
const userInfo = ref({} as ProfileVO)
|
||||
|
||||
const getUserInfo = async () => {
|
||||
const users = await getUserProfile()
|
||||
userInfo.value = users
|
||||
}
|
||||
|
||||
// 监听 userStore 中头像的变化,同步更新本地 userInfo
|
||||
watch(
|
||||
() => userStore.getUser.avatar,
|
||||
(newAvatar) => {
|
||||
if (newAvatar && userInfo.value) {
|
||||
userInfo.value.avatar = newAvatar
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
// 暴露刷新方法
|
||||
defineExpose({
|
||||
refresh: getUserInfo
|
||||
|
||||
Reference in New Issue
Block a user