modified: begushiybashkir/bbvue/src/components/AvatarUpload.vue
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:
@@ -1,232 +1,246 @@
|
||||
<!-- 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>
|
||||
<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;"
|
||||
>
|
||||
<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="uploading" class="upload-progress">
|
||||
Загрузка...
|
||||
</div>
|
||||
|
||||
<div v-if="error" class="error-message">
|
||||
{{ error }}
|
||||
</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 class="avatar-actions" v-if="showActions">
|
||||
<button v-if="user?.avatar" class="btn btn-sm btn-danger" @click="deleteAvatar" :disabled="uploading">
|
||||
🗑️ Удалить
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<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) {
|
||||
if (newUser?.avatar) {
|
||||
this.previewUrl = this.getFullAvatarUrl(newUser.avatar)
|
||||
} else {
|
||||
this.previewUrl = null
|
||||
name: 'AvatarUpload',
|
||||
props: {
|
||||
user: Object,
|
||||
showActions: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getFullAvatarUrl(avatarPath) {
|
||||
if (!avatarPath) return null
|
||||
if (avatarPath.startsWith('http')) return avatarPath
|
||||
return `${import.meta.env.VITE_API_BASE_URL}${avatarPath}`
|
||||
},
|
||||
|
||||
triggerFileInput() {
|
||||
this.$refs.fileInput.click()
|
||||
setup() {
|
||||
const authStore = useAuthStore()
|
||||
return { authStore }
|
||||
},
|
||||
|
||||
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)
|
||||
data() {
|
||||
return {
|
||||
previewUrl: null,
|
||||
uploading: false,
|
||||
error: ''
|
||||
}
|
||||
} 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')
|
||||
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
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
this.error = 'Ошибка удаления: ' + err
|
||||
} finally {
|
||||
this.uploading = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.avatar-upload {
|
||||
text-align: center;
|
||||
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;
|
||||
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;
|
||||
border-color: #2e8b57;
|
||||
}
|
||||
|
||||
.avatar-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.avatar-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.8rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background-color: #dc3545;
|
||||
color: white;
|
||||
background-color: #dc3545;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.upload-progress {
|
||||
margin: 0.5rem 0;
|
||||
color: #666;
|
||||
font-size: 0.9rem;
|
||||
margin: 0.5rem 0;
|
||||
color: #666;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
</style>
|
||||
@@ -109,45 +109,45 @@ export const useAuthStore = defineStore('auth', () => {
|
||||
}
|
||||
|
||||
const updateAvatar = async (avatarFile) => {
|
||||
const formData = new FormData()
|
||||
formData.append('avatar', avatarFile)
|
||||
const formData = new FormData()
|
||||
formData.append('avatar', avatarFile)
|
||||
|
||||
try {
|
||||
const response = await apiClient.post('/user/avatar/upload', formData, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data'
|
||||
}
|
||||
})
|
||||
try {
|
||||
const response = await apiClient.post('/user/avatar/upload', formData, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data'
|
||||
}
|
||||
})
|
||||
|
||||
if (response.data.success) {
|
||||
// Обновляем аватар в сторе
|
||||
if (user.value) {
|
||||
user.value.avatar = response.data.avatar
|
||||
if (response.data.success) {
|
||||
// Обновляем аватар в сторе
|
||||
if (user.value) {
|
||||
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 () => {
|
||||
try {
|
||||
const response = await apiClient.delete('/user/avatar/deleteg')
|
||||
|
||||
if (response.data.success) {
|
||||
// Удаляем аватар из стора
|
||||
if (user.value) {
|
||||
user.value.avatar = null
|
||||
const deleteAvatar = async () => {
|
||||
try {
|
||||
const response = await apiClient.delete('/user/avatar/deleteg')
|
||||
|
||||
if (response.data.success) {
|
||||
// Удаляем аватар из стора
|
||||
if (user.value) {
|
||||
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 {
|
||||
// State
|
||||
|
||||
@@ -12,4 +12,5 @@ LOG_LEVEL=debug
|
||||
ENVIRONMENT=development
|
||||
|
||||
# app
|
||||
REST_API_VERSION=1.0.0
|
||||
REST_API_VERSION=1.0.0
|
||||
VITE_API_BASE_URL=https://begushiybashkir.ru
|
||||
@@ -12,16 +12,17 @@ type Config struct {
|
||||
Port string
|
||||
DatabaseURL string
|
||||
JWTSecret string
|
||||
StaticURL string `env:"STATIC_URL" envDefault:"http://localhost:8080"`
|
||||
}
|
||||
|
||||
func Load() *Config {
|
||||
_ = godotenv.Load(".env")
|
||||
port := getEnv("PORT", "8080")
|
||||
jwtSecret := getEnv("JWT_SECRET", "your-secret-key")
|
||||
|
||||
|
||||
// Формируем DSN для PostgreSQL из переменных окружения
|
||||
databaseURL := getPostgresDSN()
|
||||
|
||||
|
||||
return &Config{
|
||||
Port: port,
|
||||
DatabaseURL: databaseURL,
|
||||
@@ -47,4 +48,4 @@ func getEnv(key, defaultValue string) string {
|
||||
return defaultValue
|
||||
}
|
||||
return value
|
||||
}
|
||||
}
|
||||
|
||||
@@ -30,7 +30,7 @@ type UserUpdate struct {
|
||||
ID uint `json:"id"`
|
||||
FirstName string `json:"first_name"`
|
||||
LastName string `json:"last_name"`
|
||||
Avatar string `json:"avatar"` // Добавить поле аватара
|
||||
Avatar string `json:"avatar"`
|
||||
Phone string `json:"phone"`
|
||||
Experience string `json:"experience"`
|
||||
Goals string `json:"goals"`
|
||||
|
||||
@@ -23,6 +23,10 @@ func SetupRouter(db *gorm.DB, config *config.Config) http.Handler {
|
||||
r.Use(m)
|
||||
}
|
||||
|
||||
// Serve static files (avatars) - ДОБАВЬТЕ ЭТО
|
||||
r.Handle("/uploads/*", http.StripPrefix("/uploads/",
|
||||
http.FileServer(http.Dir("/app/uploads"))))
|
||||
|
||||
// Initialize repositories
|
||||
userRepo := repository.NewUserRepository(db)
|
||||
newsRepo := repository.NewNewsRepository(db)
|
||||
|
||||
@@ -134,4 +134,11 @@ server {
|
||||
proxy_read_timeout 600;
|
||||
}
|
||||
|
||||
|
||||
location /uploads/ {
|
||||
alias /app/uploads/;
|
||||
expires 1y;
|
||||
add_header Cache-Control "public, immutable";
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user