数据结构优化
This commit is contained in:
李琦
386
client/src/components/admin/ImageUpload.vue
Normal file
386
client/src/components/admin/ImageUpload.vue
Normal file
@@ -0,0 +1,386 @@
|
||||
<template>
|
||||
<div class="image-upload">
|
||||
<!-- 单个上传模式 -->
|
||||
<template v-if="!multiple">
|
||||
<div
|
||||
v-if="!imageUrl"
|
||||
@click="triggerFileInput"
|
||||
@dragover.prevent="handleDragOver"
|
||||
@dragenter.prevent="handleDragEnter"
|
||||
@dragleave.prevent="handleDragLeave"
|
||||
@drop.prevent="handleDrop"
|
||||
class="upload-area border-2 border-dashed rounded-lg p-8 text-center cursor-pointer transition-colors"
|
||||
:class="[
|
||||
isDragging ? 'border-art-accent bg-art-accent/5' : 'border-white/20 hover:border-art-accent/50',
|
||||
disabled ? 'opacity-50 cursor-not-allowed' : ''
|
||||
]"
|
||||
>
|
||||
<input
|
||||
ref="fileInput"
|
||||
type="file"
|
||||
:accept="accept"
|
||||
:multiple="false"
|
||||
@change="handleFileSelect"
|
||||
class="hidden"
|
||||
:disabled="disabled"
|
||||
/>
|
||||
<div class="space-y-3">
|
||||
<div class="w-12 h-12 mx-auto flex items-center justify-center text-art-muted">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
|
||||
<polyline points="17 8 12 3 7 8"></polyline>
|
||||
<line x1="12" y1="3" x2="12" y2="15"></line>
|
||||
</svg>
|
||||
</div>
|
||||
<p class="text-sm text-art-muted">点击或拖拽图片到此处上传</p>
|
||||
<p class="text-xs text-art-muted/50">支持 JPG、PNG、GIF 格式</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="image-preview relative group">
|
||||
<img :src="imageUrl" alt="Preview" class="w-full h-auto rounded-lg max-h-64 object-contain bg-white/5" />
|
||||
<div class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity rounded-lg flex items-center justify-center gap-2">
|
||||
<button
|
||||
@click.stop="removeImage"
|
||||
class="px-4 py-2 bg-red-500/80 text-white rounded hover:bg-red-500 transition-colors text-sm"
|
||||
:disabled="disabled"
|
||||
>
|
||||
删除
|
||||
</button>
|
||||
<button
|
||||
@click.stop="triggerFileInput"
|
||||
class="px-4 py-2 bg-art-accent text-black rounded hover:opacity-90 transition-colors text-sm"
|
||||
:disabled="disabled"
|
||||
>
|
||||
更换
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="uploading" class="mt-4 text-center">
|
||||
<div class="inline-flex items-center gap-2 text-art-accent">
|
||||
<div class="animate-spin rounded-full h-4 w-4 border-t-2 border-b-2 border-art-accent"></div>
|
||||
<span class="text-sm">上传中...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="error" class="mt-4 text-center text-red-400 text-sm">
|
||||
{{ error }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 批量上传模式 -->
|
||||
<template v-else>
|
||||
<div class="space-y-4">
|
||||
<!-- 图片列表 -->
|
||||
<div v-if="imageUrls.length > 0" class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
|
||||
<div
|
||||
v-for="(url, index) in imageUrls"
|
||||
:key="index"
|
||||
class="image-item relative group aspect-square rounded-lg overflow-hidden bg-white/5 border border-white/10"
|
||||
>
|
||||
<img :src="url" :alt="`Image ${index + 1}`" class="w-full h-full object-cover" />
|
||||
<div class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2">
|
||||
<button
|
||||
@click="removeImage(index)"
|
||||
class="px-3 py-1.5 bg-red-500/80 text-white rounded hover:bg-red-500 transition-colors text-xs"
|
||||
:disabled="disabled"
|
||||
>
|
||||
删除
|
||||
</button>
|
||||
</div>
|
||||
<div class="absolute top-2 left-2 bg-black/50 text-white text-xs px-2 py-1 rounded">
|
||||
{{ index + 1 }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 上传区域 -->
|
||||
<div
|
||||
v-if="imageUrls.length < (maxCount || Infinity)"
|
||||
@click="triggerFileInput"
|
||||
@dragover.prevent="handleDragOver"
|
||||
@dragenter.prevent="handleDragEnter"
|
||||
@dragleave.prevent="handleDragLeave"
|
||||
@drop.prevent="handleDrop"
|
||||
class="upload-area border-2 border-dashed rounded-lg p-6 text-center cursor-pointer transition-colors"
|
||||
:class="[
|
||||
isDragging ? 'border-art-accent bg-art-accent/5' : 'border-white/20 hover:border-art-accent/50',
|
||||
disabled ? 'opacity-50 cursor-not-allowed' : ''
|
||||
]"
|
||||
>
|
||||
<input
|
||||
ref="fileInput"
|
||||
type="file"
|
||||
:accept="accept"
|
||||
:multiple="true"
|
||||
@change="handleFileSelect"
|
||||
class="hidden"
|
||||
:disabled="disabled"
|
||||
/>
|
||||
<div class="space-y-2">
|
||||
<div class="w-10 h-10 mx-auto flex items-center justify-center text-art-muted">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
|
||||
<polyline points="17 8 12 3 7 8"></polyline>
|
||||
<line x1="12" y1="3" x2="12" y2="15"></line>
|
||||
</svg>
|
||||
</div>
|
||||
<p class="text-sm text-art-muted">点击或拖拽图片到此处上传</p>
|
||||
<p class="text-xs text-art-muted/50">
|
||||
{{ maxCount ? `最多上传 ${maxCount} 张，已上传 ${imageUrls.length} 张` : `已上传 ${imageUrls.length} 张` }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 上传进度 -->
|
||||
<div v-if="uploadingCount > 0" class="mt-4 text-center">
|
||||
<div class="inline-flex items-center gap-2 text-art-accent">
|
||||
<div class="animate-spin rounded-full h-4 w-4 border-t-2 border-b-2 border-art-accent"></div>
|
||||
<span class="text-sm">正在上传 {{ uploadingCount }} 张图片...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 错误提示 -->
|
||||
<div v-if="error" class="mt-4 text-center text-red-400 text-sm">
|
||||
{{ error }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, computed } from 'vue'
|
||||
import { useToast } from '../../composables/useToast'
|
||||
import { API_BASE } from '../../services/api'
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
modelValue?: string | string[]
|
||||
multiple?: boolean
|
||||
maxCount?: number
|
||||
categoryId?: number
|
||||
accept?: string
|
||||
disabled?: boolean
|
||||
}>(), {
|
||||
multiple: false,
|
||||
accept: 'image/*',
|
||||
disabled: false
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: string | string[]]
|
||||
}>()
|
||||
|
||||
const fileInput = ref<HTMLInputElement | null>(null)
|
||||
const uploading = ref(false)
|
||||
const uploadingCount = ref(0)
|
||||
const error = ref('')
|
||||
const isDragging = ref(false)
|
||||
|
||||
const toast = useToast()
|
||||
|
||||
// 单个模式的值
|
||||
const imageUrl = computed({
|
||||
get: () => {
|
||||
if (props.multiple) return ''
|
||||
return (props.modelValue as string) || ''
|
||||
},
|
||||
set: (val: string) => {
|
||||
if (!props.multiple) {
|
||||
emit('update:modelValue', val)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// 批量模式的值
|
||||
const imageUrls = computed({
|
||||
get: () => {
|
||||
if (!props.multiple) return []
|
||||
const value = props.modelValue
|
||||
if (Array.isArray(value)) {
|
||||
return value
|
||||
}
|
||||
return value ? [value] : []
|
||||
},
|
||||
set: (val: string[]) => {
|
||||
if (props.multiple) {
|
||||
emit('update:modelValue', val)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const triggerFileInput = () => {
|
||||
if (props.disabled) return
|
||||
fileInput.value?.click()
|
||||
}
|
||||
|
||||
const handleDragOver = (e: DragEvent) => {
|
||||
if (props.disabled) return
|
||||
e.preventDefault()
|
||||
isDragging.value = true
|
||||
}
|
||||
|
||||
const handleDragEnter = (e: DragEvent) => {
|
||||
if (props.disabled) return
|
||||
e.preventDefault()
|
||||
isDragging.value = true
|
||||
}
|
||||
|
||||
const handleDragLeave = (e: DragEvent) => {
|
||||
if (props.disabled) return
|
||||
e.preventDefault()
|
||||
isDragging.value = false
|
||||
}
|
||||
|
||||
const handleDrop = (e: DragEvent) => {
|
||||
if (props.disabled) return
|
||||
e.preventDefault()
|
||||
isDragging.value = false
|
||||
|
||||
if (e.dataTransfer?.files) {
|
||||
const files = Array.from(e.dataTransfer.files).filter(file => file.type.startsWith('image/'))
|
||||
if (files.length > 0) {
|
||||
if (props.multiple) {
|
||||
handleMultipleFiles(files)
|
||||
} else {
|
||||
uploadFile(files[0])
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleFileSelect = (e: Event) => {
|
||||
const target = e.target as HTMLInputElement
|
||||
if (target.files && target.files.length > 0) {
|
||||
const files = Array.from(target.files).filter(file => file.type.startsWith('image/'))
|
||||
if (files.length > 0) {
|
||||
if (props.multiple) {
|
||||
handleMultipleFiles(files)
|
||||
} else {
|
||||
uploadFile(files[0])
|
||||
}
|
||||
}
|
||||
}
|
||||
// 清空input，允许重复选择同一文件
|
||||
if (target) {
|
||||
target.value = ''
|
||||
}
|
||||
}
|
||||
|
||||
const handleMultipleFiles = async (files: File[]) => {
|
||||
if (props.maxCount && imageUrls.value.length + files.length > props.maxCount) {
|
||||
error.value = `最多只能上传 ${props.maxCount} 张图片`
|
||||
toast.showToast(error.value, 'error')
|
||||
return
|
||||
}
|
||||
|
||||
error.value = ''
|
||||
uploadingCount.value = files.length
|
||||
|
||||
const uploadPromises = files.map(file => uploadSingleFile(file))
|
||||
|
||||
try {
|
||||
const results = await Promise.all(uploadPromises)
|
||||
const successfulUrls = results.filter(url => url !== null) as string[]
|
||||
|
||||
if (successfulUrls.length > 0) {
|
||||
const newUrls = [...imageUrls.value, ...successfulUrls]
|
||||
imageUrls.value = newUrls
|
||||
toast.showToast(`成功上传 ${successfulUrls.length} 张图片`, 'success')
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Batch upload error:', err)
|
||||
} finally {
|
||||
uploadingCount.value = 0
|
||||
}
|
||||
}
|
||||
|
||||
const uploadFile = async (file: File) => {
|
||||
if (!file.type.startsWith('image/')) {
|
||||
error.value = '请选择图片文件'
|
||||
toast.showToast(error.value, 'error')
|
||||
return
|
||||
}
|
||||
|
||||
uploading.value = true
|
||||
error.value = ''
|
||||
|
||||
try {
|
||||
const url = await uploadSingleFile(file)
|
||||
if (url) {
|
||||
imageUrl.value = url
|
||||
toast.showToast('图片上传成功', 'success')
|
||||
}
|
||||
} catch (err: any) {
|
||||
error.value = err.message || '上传失败，请重试'
|
||||
toast.showToast(error.value, 'error')
|
||||
} finally {
|
||||
uploading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const uploadSingleFile = async (file: File): Promise<string | null> => {
|
||||
try {
|
||||
const formData = new FormData()
|
||||
formData.append('file', file)
|
||||
if (props.categoryId) {
|
||||
formData.append('categoryId', props.categoryId.toString())
|
||||
}
|
||||
formData.append('storageType', 'local')
|
||||
|
||||
const token = localStorage.getItem('token')
|
||||
const response = await fetch(`${API_BASE}/admin/attachments/upload`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
...(token ? { Authorization: `Bearer ${token}` } : {})
|
||||
},
|
||||
body: formData
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json()
|
||||
throw new Error(errorData.message || '上传失败')
|
||||
}
|
||||
|
||||
const data = await response.json()
|
||||
return data.result.fileUrl
|
||||
} catch (err: any) {
|
||||
console.error('Upload error:', err)
|
||||
throw err
|
||||
}
|
||||
}
|
||||
|
||||
const removeImage = (index?: number) => {
|
||||
if (props.disabled) return
|
||||
|
||||
if (props.multiple && typeof index === 'number') {
|
||||
const newUrls = [...imageUrls.value]
|
||||
newUrls.splice(index, 1)
|
||||
imageUrls.value = newUrls
|
||||
} else {
|
||||
imageUrl.value = ''
|
||||
if (fileInput.value) {
|
||||
fileInput.value.value = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.upload-area {
|
||||
min-height: 120px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.image-item {
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.image-item:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user