modified: begushiybashkir/bbvue/src/components/AvatarUpload.vue
modified: begushiybashkir/bbvue/src/views/Profile.vue modified: begushiybashkir/bbvue/src/views/ProfileEdit.vue set avatare initialize
This commit is contained in:
@@ -1,246 +1,117 @@
|
||||
<!-- components/AvatarUpload.vue -->
|
||||
<template>
|
||||
<div class="avatar-upload">
|
||||
<div class="avatar-preview" @click="triggerFileInput">
|
||||
<img v-if="previewUrl" :src="previewUrl" alt="Avatar" class="avatar-image">
|
||||
<div v-else class="avatar-placeholder">
|
||||
<span>📷</span>
|
||||
<small>Добавить фото</small>
|
||||
</div>
|
||||
<div class="avatar-overlay">
|
||||
<span>✏️</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input ref="fileInput" type="file" accept="image/jpeg,image/png,image/gif" @change="handleFileSelect"
|
||||
style="display: none;">
|
||||
|
||||
<div v-if="uploading" class="upload-progress">
|
||||
Загрузка...
|
||||
</div>
|
||||
|
||||
<div v-if="error" class="error-message">
|
||||
{{ error }}
|
||||
</div>
|
||||
|
||||
<div class="avatar-actions" v-if="showActions">
|
||||
<button v-if="user?.avatar" class="btn btn-sm btn-danger" @click="deleteAvatar" :disabled="uploading">
|
||||
🗑️ Удалить
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- AvatarUpload.vue -->
|
||||
<script>
|
||||
import { useAuthStore } from '../stores/auth'
|
||||
|
||||
export default {
|
||||
name: 'AvatarUpload',
|
||||
props: {
|
||||
user: Object,
|
||||
showActions: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
setup() {
|
||||
const authStore = useAuthStore()
|
||||
return { authStore }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
previewUrl: null,
|
||||
uploading: false,
|
||||
error: ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
user: {
|
||||
immediate: true,
|
||||
handler(newUser) {
|
||||
console.log('User data:', newUser)
|
||||
if (newUser?.avatar) {
|
||||
console.log('Avatar path:', newUser.avatar)
|
||||
const fullUrl = this.getFullAvatarUrl(newUser.avatar)
|
||||
console.log('Full avatar URL:', fullUrl)
|
||||
this.previewUrl = fullUrl
|
||||
} else {
|
||||
console.log('No avatar found')
|
||||
this.previewUrl = null
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getFullAvatarUrl(avatarPath) {
|
||||
if (!avatarPath) return null
|
||||
|
||||
// Если путь уже полный URL
|
||||
if (avatarPath.startsWith('http')) return avatarPath
|
||||
|
||||
// Если путь начинается с /uploads
|
||||
if (avatarPath.startsWith('/uploads/')) {
|
||||
return `${import.meta.env.VITE_API_BASE_URL}${avatarPath}`
|
||||
}
|
||||
|
||||
// Если путь относительный (avatars/filename.jpg)
|
||||
if (avatarPath.startsWith('avatars/')) {
|
||||
return `${import.meta.env.VITE_API_BASE_URL}/uploads/${avatarPath}`
|
||||
}
|
||||
|
||||
// По умолчанию
|
||||
return `${import.meta.env.VITE_API_BASE_URL}/uploads/${avatarPath}`
|
||||
},
|
||||
|
||||
triggerFileInput() {
|
||||
this.$refs.fileInput.click()
|
||||
},
|
||||
|
||||
async handleFileSelect(event) {
|
||||
const file = event.target.files[0]
|
||||
if (!file) return
|
||||
|
||||
// Валидация
|
||||
if (!file.type.startsWith('image/')) {
|
||||
this.error = 'Пожалуйста, выберите файл изображения'
|
||||
return
|
||||
}
|
||||
|
||||
if (file.size > 10 * 1024 * 1024) { // 10MB
|
||||
this.error = 'Размер файла не должен превышать 10MB'
|
||||
return
|
||||
}
|
||||
|
||||
// Превью
|
||||
const reader = new FileReader()
|
||||
reader.onload = (e) => {
|
||||
this.previewUrl = e.target.result
|
||||
}
|
||||
reader.readAsDataURL(file)
|
||||
|
||||
// Загрузка
|
||||
await this.uploadAvatar(file)
|
||||
event.target.value = '' // Сброс input
|
||||
},
|
||||
|
||||
async uploadAvatar(file) {
|
||||
this.uploading = true
|
||||
this.error = ''
|
||||
|
||||
try {
|
||||
const result = await this.authStore.updateAvatar(file)
|
||||
if (!result.success) {
|
||||
this.error = result.error
|
||||
this.previewUrl = this.getFullAvatarUrl(this.user?.avatar) // Восстанавливаем старый аватар
|
||||
} else {
|
||||
this.$emit('avatar-updated', result.avatar)
|
||||
}
|
||||
} catch (err) {
|
||||
this.error = 'Ошибка загрузки: ' + err
|
||||
this.previewUrl = this.getFullAvatarUrl(this.user?.avatar)
|
||||
} finally {
|
||||
this.uploading = false
|
||||
}
|
||||
},
|
||||
|
||||
async deleteAvatar() {
|
||||
this.uploading = true
|
||||
this.error = ''
|
||||
|
||||
try {
|
||||
const result = await this.authStore.deleteAvatar()
|
||||
if (!result.success) {
|
||||
this.error = result.error
|
||||
} else {
|
||||
this.previewUrl = null
|
||||
this.$emit('avatar-deleted')
|
||||
}
|
||||
} catch (err) {
|
||||
this.error = 'Ошибка удаления: ' + err
|
||||
} finally {
|
||||
this.uploading = false
|
||||
}
|
||||
}
|
||||
name: 'AvatarUpload',
|
||||
props: {
|
||||
user: Object,
|
||||
showActions: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
}
|
||||
</script>
|
||||
},
|
||||
setup() {
|
||||
const authStore = useAuthStore()
|
||||
return { authStore }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
previewUrl: null,
|
||||
uploading: false,
|
||||
error: ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
user: {
|
||||
immediate: true,
|
||||
handler(newUser) {
|
||||
console.log('User data in AvatarUpload:', newUser)
|
||||
if (newUser?.avatar) {
|
||||
console.log('Avatar path:', newUser.avatar)
|
||||
const fullUrl = this.getFullAvatarUrl(newUser.avatar)
|
||||
console.log('Full avatar URL:', fullUrl)
|
||||
this.previewUrl = fullUrl
|
||||
} else {
|
||||
console.log('No avatar found')
|
||||
this.previewUrl = null
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getFullAvatarUrl(avatarPath) {
|
||||
if (!avatarPath) return null
|
||||
|
||||
console.log('Building URL for avatar path:', avatarPath)
|
||||
|
||||
<style scoped>
|
||||
.avatar-upload {
|
||||
text-align: center;
|
||||
}
|
||||
// Если путь уже полный URL
|
||||
if (avatarPath.startsWith('http')) {
|
||||
return avatarPath
|
||||
}
|
||||
|
||||
.avatar-preview {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
margin: 0 auto 1rem;
|
||||
border: 3px solid #e0e0e0;
|
||||
transition: border-color 0.3s;
|
||||
}
|
||||
// Если путь начинается с /uploads
|
||||
if (avatarPath.startsWith('/uploads/')) {
|
||||
const fullUrl = `https://begushiybashkir.ru${avatarPath}`
|
||||
console.log('Built URL with /uploads prefix:', fullUrl)
|
||||
return fullUrl
|
||||
}
|
||||
|
||||
.avatar-preview:hover {
|
||||
border-color: #2e8b57;
|
||||
}
|
||||
// Если путь относительный
|
||||
const fullUrl = `https://begushiybashkir.ru/uploads/${avatarPath}`
|
||||
console.log('Built URL with relative path:', fullUrl)
|
||||
return fullUrl
|
||||
},
|
||||
|
||||
.avatar-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
async uploadAvatar(file) {
|
||||
this.uploading = true
|
||||
this.error = ''
|
||||
|
||||
.avatar-placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f5f5f5;
|
||||
color: #666;
|
||||
}
|
||||
try {
|
||||
const result = await this.authStore.updateAvatar(file)
|
||||
console.log('Upload result:', result)
|
||||
|
||||
if (result.success) {
|
||||
this.$emit('avatar-updated', result.avatar)
|
||||
// Обновляем preview из обновленного user data
|
||||
if (this.authStore.user?.avatar) {
|
||||
this.previewUrl = this.getFullAvatarUrl(this.authStore.user.avatar)
|
||||
}
|
||||
} else {
|
||||
this.error = result.error || 'Ошибка загрузки'
|
||||
// Восстанавливаем старый preview
|
||||
this.previewUrl = this.getFullAvatarUrl(this.user?.avatar)
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Upload error:', err)
|
||||
this.error = 'Ошибка загрузки: ' + err.message
|
||||
this.previewUrl = this.getFullAvatarUrl(this.user?.avatar)
|
||||
} finally {
|
||||
this.uploading = false
|
||||
}
|
||||
},
|
||||
|
||||
.avatar-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
color: white;
|
||||
}
|
||||
async deleteAvatar() {
|
||||
this.uploading = true
|
||||
this.error = ''
|
||||
|
||||
.avatar-preview:hover .avatar-overlay {
|
||||
opacity: 1;
|
||||
try {
|
||||
const result = await this.authStore.deleteAvatar()
|
||||
console.log('Delete result:', result)
|
||||
|
||||
if (result.success) {
|
||||
this.previewUrl = null
|
||||
this.$emit('avatar-deleted')
|
||||
} else {
|
||||
this.error = result.error || 'Ошибка удаления'
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Delete error:', err)
|
||||
this.error = 'Ошибка удаления: ' + err.message
|
||||
} finally {
|
||||
this.uploading = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background-color: #dc3545;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.upload-progress {
|
||||
margin: 0.5rem 0;
|
||||
color: #666;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
</style>
|
||||
</script>
|
||||
@@ -171,6 +171,11 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async onAvatarUpdated() {
|
||||
// Принудительно обновляем профиль
|
||||
await this.authStore.fetchProfile()
|
||||
console.log('Avatar updated, user data:', this.authStore.user)
|
||||
},
|
||||
getImageUrl(path) {
|
||||
const baseUrl = import.meta.env.BASE_URL
|
||||
return `${baseUrl}images/${path}`
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
|
||||
<div class="avatar-section">
|
||||
<h3>Фотография профиля</h3>
|
||||
<AvatarUpload :user="user" :show-actions="true" />
|
||||
<AvatarUpload :user="user" :show-actions="true" @avatar-updated="onAvatarUpdated" />
|
||||
</div>
|
||||
|
||||
<div v-if="loading && !user" class="loading">Загрузка...</div>
|
||||
@@ -137,6 +137,11 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async onAvatarUpdated() {
|
||||
// Обновляем данные пользователя после загрузки аватара
|
||||
await this.authStore.fetchProfile()
|
||||
this.initializeForm()
|
||||
},
|
||||
initializeForm() {
|
||||
if (this.user) {
|
||||
this.formData = {
|
||||
|
||||
Reference in New Issue
Block a user