valitovgaziz/tp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

modified: begushiybashkir/bbvue/src/components/AvatarUpload.vue

Browse Source 
modified:   begushiybashkir/bbvue/src/stores/auth.js
	modified:   serv_nginx/api_bb/.env
	modified:   serv_nginx/api_bb/internal/config/config.go
	modified:   serv_nginx/api_bb/internal/models/user.go
	modified:   serv_nginx/api_bb/internal/routes/routes.go
	modified:   serv_nginx/nginx/nginx-ssl.conf
some for get photo from api_bb
This commit is contained in:
Газиз Валитов
2025-10-13 03:12:42 +05:00
parent b5ebe138cf
commit af9dc82c58
7 changed files with 237 additions and 210 deletions
Download Patch File Download Diff File Expand all files Collapse all files
begushiybashkir/bbvue/src/components/AvatarUpload.vue
+189 -175
View File
@@ -1,232 +1,246 @@
<!-- components/AvatarUpload.vue --> <!-- components/AvatarUpload.vue -->
<template> <template>
<div class="avatar-upload"> <div class="avatar-upload">
<div class="avatar-preview" @click="triggerFileInput"> <div class="avatar-preview" @click="triggerFileInput">
<img v-if="previewUrl" :src="previewUrl" alt="Avatar" class="avatar-image"> <img v-if="previewUrl" :src="previewUrl" alt="Avatar" class="avatar-image">
<div v-else class="avatar-placeholder"> <div v-else class="avatar-placeholder">
<span>📷</span> <span>📷</span>
<small>Добавить фото</small> <small>Добавить фото</small>
</div> </div>
<div class="avatar-overlay"> <div class="avatar-overlay">
<span>✏️</span> <span>✏️</span>
</div> </div>
</div> </div>
<input <input ref="fileInput" type="file" accept="image/jpeg,image/png,image/gif" @change="handleFileSelect"
ref="fileInput" style="display: none;">
type="file"
accept="image/jpeg,image/png,image/gif"
@change="handleFileSelect"
style="display: none;"
>
<div v-if="uploading" class="upload-progress"> <div v-if="uploading" class="upload-progress">
Загрузка... Загрузка...
</div> </div>
<div v-if="error" class="error-message"> <div v-if="error" class="error-message">
{{ error }} {{ error }}
</div> </div>
<div class="avatar-actions" v-if="showActions"> <div class="avatar-actions" v-if="showActions">
<button v-if="user?.avatar" class="btn btn-sm btn-danger" @click="deleteAvatar" :disabled="uploading"> <button v-if="user?.avatar" class="btn btn-sm btn-danger" @click="deleteAvatar" :disabled="uploading">
🗑️ Удалить 🗑️ Удалить
</button> </button>
</div>
</div> </div>
</div>
</template> </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) {
if (newUser?.avatar) {
this.previewUrl = this.getFullAvatarUrl(newUser.avatar)
} else {
this.previewUrl = null
} }
}
}
},
methods: {
getFullAvatarUrl(avatarPath) {
if (!avatarPath) return null
if (avatarPath.startsWith('http')) return avatarPath
return `${import.meta.env.VITE_API_BASE_URL}${avatarPath}`
}, },
setup() {
triggerFileInput() { const authStore = useAuthStore()
this.$refs.fileInput.click() return { authStore }
}, },
data() {
async handleFileSelect(event) { return {
const file = event.target.files[0] previewUrl: null,
if (!file) return uploading: false,
error: ''
// Валидация
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
}
}, },
watch: {
async deleteAvatar() { user: {
this.uploading = true immediate: true,
this.error = '' handler(newUser) {
console.log('User data:', newUser)
try { if (newUser?.avatar) {
const result = await this.authStore.deleteAvatar() console.log('Avatar path:', newUser.avatar)
if (!result.success) { const fullUrl = this.getFullAvatarUrl(newUser.avatar)
this.error = result.error console.log('Full avatar URL:', fullUrl)
} else { this.previewUrl = fullUrl
this.previewUrl = null } else {
this.$emit('avatar-deleted') 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
}
} }
} catch (err) {
this.error = 'Ошибка удаления: ' + err
} finally {
this.uploading = false
}
} }
}
} }
</script> </script>
<style scoped> <style scoped>
.avatar-upload { .avatar-upload {
text-align: center; text-align: center;
} }
.avatar-preview { .avatar-preview {
width: 120px; width: 120px;
height: 120px; height: 120px;
border-radius: 50%; border-radius: 50%;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
margin: 0 auto 1rem; margin: 0 auto 1rem;
border: 3px solid #e0e0e0; border: 3px solid #e0e0e0;
transition: border-color 0.3s; transition: border-color 0.3s;
} }
.avatar-preview:hover { .avatar-preview:hover {
border-color: #2e8b57; border-color: #2e8b57;
} }
.avatar-image { .avatar-image {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
} }
.avatar-placeholder { .avatar-placeholder {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: #f5f5f5; background: #f5f5f5;
color: #666; color: #666;
} }
.avatar-overlay { .avatar-overlay {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.5);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
opacity: 0; opacity: 0;
transition: opacity 0.3s; transition: opacity 0.3s;
color: white; color: white;
} }
.avatar-preview:hover .avatar-overlay { .avatar-preview:hover .avatar-overlay {
opacity: 1; opacity: 1;
} }
.avatar-actions { .avatar-actions {
display: flex; display: flex;
gap: 0.5rem; gap: 0.5rem;
justify-content: center; justify-content: center;
} }
.btn-sm { .btn-sm {
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
font-size: 0.8rem; font-size: 0.8rem;
} }
.btn-danger { .btn-danger {
background-color: #dc3545; background-color: #dc3545;
color: white; color: white;
} }
.upload-progress { .upload-progress {
margin: 0.5rem 0; margin: 0.5rem 0;
color: #666; color: #666;
font-size: 0.9rem; font-size: 0.9rem;
} }
</style> </style>
begushiybashkir/bbvue/src/stores/auth.js
+29 -29
View File
@@ -109,45 +109,45 @@ export const useAuthStore = defineStore('auth', () => {
} }
const updateAvatar = async (avatarFile) => { const updateAvatar = async (avatarFile) => {
const formData = new FormData() const formData = new FormData()
formData.append('avatar', avatarFile) formData.append('avatar', avatarFile)
try { try {
const response = await apiClient.post('/user/avatar/upload', formData, { const response = await apiClient.post('/user/avatar/upload', formData, {
headers: { headers: {
'Content-Type': 'multipart/form-data' 'Content-Type': 'multipart/form-data'
} }
}) })
if (response.data.success) { if (response.data.success) {
// Обновляем аватар в сторе // Обновляем аватар в сторе
if (user.value) { if (user.value) {
user.value.avatar = response.data.avatar user.value.avatar = response.data.avatar
}
return { success: true, avatar: response.data.avatar }
} }
return { success: true, avatar: response.data.avatar } } catch (error) {
const result = handleApiError(error)
return result
} }
} catch (error) {
const result = handleApiError(error)
return result
} }
}
const deleteAvatar = async () => { const deleteAvatar = async () => {
try { try {
const response = await apiClient.delete('/user/avatar/deleteg') const response = await apiClient.delete('/user/avatar/deleteg')
if (response.data.success) { if (response.data.success) {
// Удаляем аватар из стора // Удаляем аватар из стора
if (user.value) { if (user.value) {
user.value.avatar = null user.value.avatar = null
}
return { success: true }
} }
return { success: true } } catch (error) {
const result = handleApiError(error)
return result
} }
} catch (error) {
const result = handleApiError(error)
return result
} }
}
return { return {
// State // State
serv_nginx/api_bb/.env
+1
View File
@@ -13,3 +13,4 @@ ENVIRONMENT=development
# app # app
REST_API_VERSION=1.0.0 REST_API_VERSION=1.0.0
VITE_API_BASE_URL=https://begushiybashkir.ru
serv_nginx/api_bb/internal/config/config.go
+1
View File
@@ -12,6 +12,7 @@ type Config struct {
Port string Port string
DatabaseURL string DatabaseURL string
JWTSecret string JWTSecret string
StaticURL string `env:"STATIC_URL" envDefault:"http://localhost:8080"`
} }
func Load() *Config { func Load() *Config {
serv_nginx/api_bb/internal/models/user.go
+1 -1
View File
@@ -30,7 +30,7 @@ type UserUpdate struct {
ID uint `json:"id"` ID uint `json:"id"`
FirstName string `json:"first_name"` FirstName string `json:"first_name"`
LastName string `json:"last_name"` LastName string `json:"last_name"`
Avatar string `json:"avatar"` // Добавить поле аватара Avatar string `json:"avatar"`
Phone string `json:"phone"` Phone string `json:"phone"`
Experience string `json:"experience"` Experience string `json:"experience"`
Goals string `json:"goals"` Goals string `json:"goals"`
serv_nginx/api_bb/internal/routes/routes.go
+4
View File
@@ -23,6 +23,10 @@ func SetupRouter(db *gorm.DB, config *config.Config) http.Handler {
r.Use(m) r.Use(m)
} }
// Serve static files (avatars) - ДОБАВЬТЕ ЭТО
r.Handle("/uploads/*", http.StripPrefix("/uploads/",
http.FileServer(http.Dir("/app/uploads"))))
// Initialize repositories // Initialize repositories
userRepo := repository.NewUserRepository(db) userRepo := repository.NewUserRepository(db)
newsRepo := repository.NewNewsRepository(db) newsRepo := repository.NewNewsRepository(db)
serv_nginx/nginx/nginx-ssl.conf
+7
View File
@@ -134,4 +134,11 @@ server {
proxy_read_timeout 600; proxy_read_timeout 600;
} }
location /uploads/ {
alias /app/uploads/;
expires 1y;
add_header Cache-Control "public, immutable";
}
} }