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:
@@ -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" } })
|
||||
|
||||
@@ -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'
|
||||
|
||||
Reference in New Issue
Block a user