GalleryImages - Gallery Images

Usage Examples

Basic Usage

Display a group of images with the ability to upload new ones, supports drag and drop uploads

300px

<template>
  <div class="p-4">
    <GalleryImages
      v-model:images="images"
      :allow-upload="allowUpload"
      @upload="handleUpload"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import GalleryImages from '~/components/theme/gallery/GalleryImages.vue'
import { useAlert } from '~/composables/useAlert'

const { showSuccess, showError } = useAlert()

// 示例图片数据
const images = ref([
  {
    id: 'example-1',
    thumbnailUrl: 'https://www.lycoo.com/api/gallery/example/display/1?size=thumbnail',
    previewUrl: 'https://www.lycoo.com/api/gallery/example/display/1?size=preview',
    originalUrl: 'https://www.lycoo.com/api/gallery/example/display/1?size=original',
    filename: 'example-1.jpg',
    filesize: '1.2MB',
    imageSize: '800x600'
  },
  {
    id: 'example-2',
    thumbnailUrl: 'https://www.lycoo.com/api/gallery/example/display/2?size=thumbnail',
    previewUrl: 'https://www.lycoo.com/api/gallery/example/display/2?size=preview',
    originalUrl: 'https://www.lycoo.com/api/gallery/example/display/2?size=original',
    filename: 'example-2.jpg',
    filesize: '1.5MB',
    imageSize: '1024x768'
  },
  {
    id: 'example-3',
    thumbnailUrl: 'https://www.lycoo.com/api/gallery/example/display/3?size=thumbnail',
    previewUrl: 'https://www.lycoo.com/api/gallery/example/display/3?size=preview',
    originalUrl: 'https://www.lycoo.com/api/gallery/example/display/3?size=original',
    filename: 'example-3.jpg',
    filesize: '2.1MB',
    imageSize: '1280x960'
  },
  // 添加一个上传中的图片示例
  {
    id: 'uploading-example-1',
    dataUrl: 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"%3E%3Crect width="200" height="200" fill="%23f0f0f0"/%3E%3Ccircle cx="100" cy="100" r="50" fill="%23e0e0e0"/%3E%3Ctext x="50%" y="50%" font-family="Arial" font-size="16" text-anchor="middle" dominant-baseline="middle" fill="%23555"%3EDemo Image%3C/text%3E%3C/svg%3E',
    filename: 'uploading-example.jpg',
    filesize: '1.8MB',
    imageSize: '1200x900',
    progress: 45,
    uploading: true
  }
])

const allowUpload = ref(true)

// 处理上传事件
const handleUpload = (fileItems) => {
  if (fileItems && fileItems.length) {
    fileItems.forEach(item => {
      // 找到对应ID的图片，模拟上传过程
      const imageToUpdate = images.value.find(img => img.id === item.id)
      if (imageToUpdate) {
        simulateUpload(imageToUpdate)
      }
    })
  }
}

// 模拟上传进度
const simulateUpload = (image) => {
  let progress = image.progress || 0
  const interval = setInterval(() => {
    progress += 10
    image.progress = progress
    
    if (progress >= 100) {
      clearInterval(interval)
      
      // 随机选择一个示例图片ID (4-10)
      const randomId = Math.floor(Math.random() * 7) + 4
      
      // 上传完成后更新图片信息
      setTimeout(() => {
        image.uploading = false
        image.thumbnailUrl = `https://www.lycoo.com/api/gallery/example/display/${randomId}?size=thumbnail`
        image.previewUrl = `https://www.lycoo.com/api/gallery/example/display/${randomId}?size=preview`
        image.originalUrl = `https://www.lycoo.com/api/gallery/example/display/${randomId}?size=original`
        image.filename = image.filename || `example-${randomId}.jpg`
        image.filesize = image.filesize || '1.8MB'
        image.imageSize = '1200x900'
        showSuccess(`图片 ${image.filename} 上传完成`)
      }, 500)
    }
  }, 500)
}
</script>

Read-Only Mode

Display images without the option to upload

300px

Upload Control

Demonstrates how to handle the image upload process and states

300px

<template>
  <div class="p-4">
    <GalleryImages
      v-model:images="images"
      :allow-upload="true"
      @upload="handleUpload"
    />
    
    <!-- 控制面板 -->
    <div class="mt-6 p-4 border rounded-lg bg-gray-50 dark:bg-gray-800">
      <h3 class="font-medium text-lg mb-3">上传控制</h3>
      <div class="flex flex-wrap gap-3">
        <Button @click="addRandomImage" color="primary">
          添加随机图片
        </Button>
        <Button @click="addUploadingImage" color="secondary">
          添加上传中图片
        </Button>
        <Button @click="updateUploadProgress" color="info">
          更新上传进度
        </Button>
        <Button @click="clearImages" variant="outline" color="danger">
          清空图片
        </Button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import GalleryImages from '~/components/theme/gallery/GalleryImages.vue'
import Button from '~/components/theme/Button.vue'
import { useAlert } from '~/composables/useAlert'

const { showSuccess, showWarning, showError } = useAlert()

// 示例图片数据
const images = ref([
  {
    id: 'example-8',
    thumbnailUrl: 'https://www.lycoo.com/api/gallery/example/display/8?size=thumbnail',
    previewUrl: 'https://www.lycoo.com/api/gallery/example/display/8?size=preview',
    originalUrl: 'https://www.lycoo.com/api/gallery/example/display/8?size=original',
    filename: 'example-8.jpg',
    filesize: '1.6MB',
    imageSize: '900x800'
  }
])

// 生成唯一ID
const generateId = () => {
  return `img_${Date.now()}_${Math.floor(Math.random() * 1000)}`
}

// 处理上传事件
const handleUpload = (fileItems) => {
  if (fileItems && fileItems.length) {
    fileItems.forEach(item => {
      // 找到对应ID的图片，模拟上传过程
      const imageToUpdate = images.value.find(img => img.id === item.id)
      if (imageToUpdate) {
        simulateUpload(imageToUpdate)
      }
    })
  }
}

// 添加一个随机图片
const addRandomImage = () => {
  const randomId = Math.floor(Math.random() * 10) + 1
  
  images.value.push({
    id: generateId(),
    thumbnailUrl: `https://www.lycoo.com/api/gallery/example/display/${randomId}?size=thumbnail`,
    previewUrl: `https://www.lycoo.com/api/gallery/example/display/${randomId}?size=preview`,
    originalUrl: `https://www.lycoo.com/api/gallery/example/display/${randomId}?size=original`,
    filename: `example-${randomId}.jpg`,
    filesize: `${(Math.random() * 2 + 0.5).toFixed(1)}MB`,
    imageSize: '1200x900'
  })
  
  showSuccess('已添加随机图片')
}

// 添加一个上传中的图片
const addUploadingImage = () => {
  // 创建一个包含预览内容的SVG数据URL
  const colors = ['#3b82f6', '#ef4444', '#10b981', '#f59e0b', '#8b5cf6']
  const randColor = colors[Math.floor(Math.random() * colors.length)]
  const imageData = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='400' viewBox='0 0 600 400'%3E%3Crect width='600' height='400' fill='%23f0f0f0'/%3E%3Ccircle cx='300' cy='180' r='80' fill='${randColor}'/%3E%3Crect x='220' y='280' width='160' height='20' rx='10' fill='%23e0e0e0'/%3E%3Crect x='250' y='310' width='100' height='20' rx='10' fill='%23e0e0e0'/%3E%3Ctext x='50%25' y='120' font-family='Arial' font-size='20' text-anchor='middle' fill='%23555'%3EDemo Upload%3C/text%3E%3C/svg%3E`
  
  const newImage = {
    id: generateId(),
    dataUrl: imageData,
    filename: `image-${Math.floor(Math.random() * 1000)}.jpg`,
    filesize: `${(Math.random() * 2 + 0.5).toFixed(1)}MB`,
    imageSize: '600x400',
    progress: 0,
    uploading: true
  }
  
  images.value.push(newImage)
  showSuccess('添加上传中图片')
}

// 更新上传进度
const updateUploadProgress = () => {
  const uploadingImages = images.value.filter(img => img.uploading)
  
  if (uploadingImages.length === 0) {
    showWarning('没有正在上传的图片')
    return
  }
  
  // 为所有上传中图片增加进度
  uploadingImages.forEach(img => {
    // 增加一个随机的进度值(10-25)，使进度更自然
    const progressIncrement = Math.floor(Math.random() * 15) + 10
    img.progress = Math.min((img.progress || 0) + progressIncrement, 100)
    
    // 如果到达100%，完成上传
    if (img.progress === 100) {
      setTimeout(() => {
        const randomId = Math.floor(Math.random() * 10) + 1
        
        // 上传完成后更新图片信息
        img.uploading = false
        img.thumbnailUrl = `https://www.lycoo.com/api/gallery/example/display/${randomId}?size=thumbnail`
        img.previewUrl = `https://www.lycoo.com/api/gallery/example/display/${randomId}?size=preview`
        img.originalUrl = `https://www.lycoo.com/api/gallery/example/display/${randomId}?size=original`
        
        showSuccess(`图片 ${img.filename} 已上传完成`)
      }, 500)
    }
  })
  
  const progressInfo = uploadingImages.map(img => `${img.filename}: ${Math.round(img.progress)}%`).join(', ')
  showSuccess(`更新上传进度: ${progressInfo}`)
}

// 模拟上传进度
const simulateUpload = (image) => {
  let progress = 0
  const interval = setInterval(() => {
    // 实际上传通常不是线性的，开始快，后面逐渐变慢
    let increment = 0
    if (progress < 30) {
      // 开始上传较快
      increment = Math.floor(Math.random() * 10) + 15
    } else if (progress < 70) {
      // 中间阶段正常速度
      increment = Math.floor(Math.random() * 8) + 7
    } else {
      // 最后阶段变慢
      increment = Math.floor(Math.random() * 5) + 3
    }
    
    progress = Math.min(progress + increment, 100)
    image.progress = progress
    
    if (progress >= 100) {
      clearInterval(interval)
      
      // 随机选择一个示例图片ID
      const randomId = Math.floor(Math.random() * 10) + 1
      
      // 上传完成后延迟一下再更新图片信息，模拟服务器处理时间
      setTimeout(() => {
        image.uploading = false
        image.thumbnailUrl = `https://www.lycoo.com/api/gallery/example/display/${randomId}?size=thumbnail`
        image.previewUrl = `https://www.lycoo.com/api/gallery/example/display/${randomId}?size=preview`
        image.originalUrl = `https://www.lycoo.com/api/gallery/example/display/${randomId}?size=original`
        
        showSuccess(`图片 ${image.filename} 已上传成功`)
      }, 800)
    }
  }, 500)
}

// 清空所有图片
const clearImages = () => {
  images.value = []
  
  showWarning('所有图片已被清除')
}
</script>

Properties

Property	Basic component module for translation keys shared across all component documentation pages	Type	Default
images	Array of image objects	Array	[]
allowUpload	Whether to allow uploading new images	Boolean	false

Events

Event	Basic component module for translation keys shared across all component documentation pages	Parameters
upload	Triggered when the upload button is clicked or files are dropped, provides array of file and ID objects	fileItems: Array<{file: File, id: String}>
update:images	Triggered when the image list is updated, with the updated images array as parameter	images: Array

Data Format

Image Object Format

Specification for image objects accepted by the component, including both completed uploads and in-progress uploads

// 已上传完成的图片
{
  id: string,                // 图片唯一ID
  thumbnailUrl: string,      // 缩略图URL
  previewUrl: string,        // 预览图URL
  originalUrl: string,       // 原图URL
  filename?: string,         // 文件名（可选）
  filesize?: string,         // 文件大小（可选）
  imageSize?: string         // 图片尺寸（可选）
}

// 上传中的图片
{
  id: string,                // 图片唯一ID
  dataUrl: string,           // 图片数据URL (base64或URL)
  filename?: string,         // 文件名（可选）
  filesize?: string,         // 文件大小（可选）
  imageSize?: string,        // 图片尺寸（可选）
  progress: number,          // 上传进度 (0-100)
  uploading: true            // 标记为上传中
}

Basic Components

Gallery Images

Usage Examples

Basic Usage

Read-Only Mode

Upload Control

Properties

Events

Data Format

Image Object Format