feat: add avatar photo upload via Huihui filecenter

- Add POST /avatars/{id}/upload-photo endpoint
- Use Huihui platform's filecenter API for image upload (same signing mechanism as news_service)
- Add upload button in avatar list table
- Frontend: handleUploadPhoto function with el-upload component
- Updates avatar photo_url in SQLite after successful upload
This commit is contained in:
stefanfeng
2026-08-07 14:28:22 +08:00
parent a5f7c86a4b
commit b7f8ac203b
3 changed files with 163 additions and 4 deletions
+3
View File
@@ -90,6 +90,9 @@ export const tailLogFile = (filename, lines = 100) => request.get(`/logs/files/$
export const getAvatars = (params) => request.get('/avatars', { params })
export const getAvatarDetail = (id) => request.get(`/avatars/${id}`)
export const updateAvatarStatus = (id, status) => request.put(`/avatars/${id}/status`, { status })
export const uploadAvatarPhoto = (id, formData) => request.post(`/avatars/${id}/upload-photo`, formData, {
headers: { 'Content-Type': 'multipart/form-data' }
})
export default request
export const uploadAvatar = (userId, formData) => request.post(`/users/${userId}/upload-avatar`, formData, { headers: { "Content-Type": "multipart/form-data" } })
+29 -3
View File
@@ -76,9 +76,14 @@
</el-tooltip>
</template>
</el-table-column>
<el-table-column label="操作" width="100" fixed="right">
<el-table-column label="操作" width="160" fixed="right">
<template #default="{ row }">
<el-button size="small" @click="openDetail(row)">详情</el-button>
<div style="display:flex;gap:4px">
<el-upload :show-file-list="false" accept="image/*" :before-upload="(file) => handleUploadPhoto(row, file)">
<el-button size="small" :loading="row._uploading"> 上传</el-button>
</el-upload>
<el-button size="small" @click="openDetail(row)">详情</el-button>
</div>
</template>
</el-table-column>
</el-table>
@@ -195,7 +200,7 @@
<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { ElMessage } from 'element-plus'
import { getAvatars, updateAvatarStatus } from '@/api'
import { getAvatars, updateAvatarStatus, uploadAvatarPhoto } from '@/api'
const avatars = ref([])
const total = ref(0)
@@ -255,6 +260,27 @@ function openDetail(row) {
detailVisible.value = true
}
async function handleUploadPhoto(row, file) {
const formData = new FormData()
formData.append('file', file)
row._uploading = true
try {
const res = await uploadAvatarPhoto(row.id, formData)
if (res.code === 200) {
row.photo_url = res.data?.photo_url || row.photo_url
ElMessage.success('头像上传成功')
loadAvatars()
} else {
ElMessage.error(res.message || '上传失败')
}
} catch (e) {
ElMessage.error('上传失败:' + (e.message || '未知错误'))
} finally {
row._uploading = false
}
return false // prevent el-upload default behavior
}
function handleAvatarError(e) {
// 图片加载失败时隐藏 img,只保留 emoji fallback
e.target.style.display = 'none'