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 -->
|
<!-- 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>
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { useAuthStore } from '../stores/auth'
|
import { useAuthStore } from '../stores/auth'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'AvatarUpload',
|
name: 'AvatarUpload',
|
||||||
props: {
|
props: {
|
||||||
user: Object,
|
user: Object,
|
||||||
showActions: {
|
showActions: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: true
|
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
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
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)
|
||||||
|
|
||||||
|
// Если путь уже полный URL
|
||||||
|
if (avatarPath.startsWith('http')) {
|
||||||
|
return avatarPath
|
||||||
|
}
|
||||||
|
|
||||||
|
// Если путь начинается с /uploads
|
||||||
|
if (avatarPath.startsWith('/uploads/')) {
|
||||||
|
const fullUrl = `https://begushiybashkir.ru${avatarPath}`
|
||||||
|
console.log('Built URL with /uploads prefix:', fullUrl)
|
||||||
|
return fullUrl
|
||||||
|
}
|
||||||
|
|
||||||
|
// Если путь относительный
|
||||||
|
const fullUrl = `https://begushiybashkir.ru/uploads/${avatarPath}`
|
||||||
|
console.log('Built URL with relative path:', fullUrl)
|
||||||
|
return fullUrl
|
||||||
|
},
|
||||||
|
|
||||||
|
async uploadAvatar(file) {
|
||||||
|
this.uploading = true
|
||||||
|
this.error = ''
|
||||||
|
|
||||||
|
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
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async deleteAvatar() {
|
||||||
|
this.uploading = true
|
||||||
|
this.error = ''
|
||||||
|
|
||||||
|
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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.avatar-upload {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar-preview:hover {
|
|
||||||
border-color: #2e8b57;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar-image {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar-placeholder {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
background: #f5f5f5;
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar-preview:hover .avatar-overlay {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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>
|
|
||||||
@@ -171,6 +171,11 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
async onAvatarUpdated() {
|
||||||
|
// Принудительно обновляем профиль
|
||||||
|
await this.authStore.fetchProfile()
|
||||||
|
console.log('Avatar updated, user data:', this.authStore.user)
|
||||||
|
},
|
||||||
getImageUrl(path) {
|
getImageUrl(path) {
|
||||||
const baseUrl = import.meta.env.BASE_URL
|
const baseUrl = import.meta.env.BASE_URL
|
||||||
return `${baseUrl}images/${path}`
|
return `${baseUrl}images/${path}`
|
||||||
|
|||||||
@@ -4,7 +4,7 @@
|
|||||||
|
|
||||||
<div class="avatar-section">
|
<div class="avatar-section">
|
||||||
<h3>Фотография профиля</h3>
|
<h3>Фотография профиля</h3>
|
||||||
<AvatarUpload :user="user" :show-actions="true" />
|
<AvatarUpload :user="user" :show-actions="true" @avatar-updated="onAvatarUpdated" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="loading && !user" class="loading">Загрузка...</div>
|
<div v-if="loading && !user" class="loading">Загрузка...</div>
|
||||||
@@ -137,6 +137,11 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
async onAvatarUpdated() {
|
||||||
|
// Обновляем данные пользователя после загрузки аватара
|
||||||
|
await this.authStore.fetchProfile()
|
||||||
|
this.initializeForm()
|
||||||
|
},
|
||||||
initializeForm() {
|
initializeForm() {
|
||||||
if (this.user) {
|
if (this.user) {
|
||||||
this.formData = {
|
this.formData = {
|
||||||
|
|||||||
Reference in New Issue
Block a user