Upload

Загрузка файлов с drag-and-drop, отслеживанием прогресса, предпросмотром изображений и несколькими стилями списков.

<script setup lang="ts">
import { ref } from 'vue'
import { VxUpload } from 'veloxui'
import type { UploadFile } from 'veloxui'

const files = ref<UploadFile[]>([])
</script>

<template>
  <VxUpload v-model="files" action="/api/upload" />
</template>

Drag and Drop

Включите drag для области drop-зоны. Пользователи могут перетаскивать файлы в зону или кликнуть для выбора.

Drop files here or click to browse

Supports JPG, PNG, GIF up to 10MB

<script setup lang="ts">
import { ref } from 'vue'
import type { UploadFile } from 'veloxui'

const files = ref<UploadFile[]>([])
</script>

<template>
  <VxUpload
    v-model="files"
    action="/api/upload"
    drag
    multiple
    tip="Supports JPG, PNG, GIF up to 10MB"
  />
</template>

Picture List

Установите list-type="picture", чтобы показывать миниатюры рядом с именами файлов.

<script setup lang="ts">
import { ref } from 'vue'
import type { UploadFile } from 'veloxui'

const files = ref<UploadFile[]>([])
</script>

<template>
  <VxUpload
    v-model="files"
    action="/api/upload"
    list-type="picture"
    multiple
    accept="image/*"
  />
</template>

Picture Card

Установите list-type="picture-card" для сетки карточек с изображениями и действиями при наведении (предпросмотр и удаление).

<script setup lang="ts">
import { ref } from 'vue'
import type { UploadFile } from 'veloxui'

const files = ref<UploadFile[]>([
  { uid: '1', name: 'photo.jpg', status: 'success', url: 'https://picsum.photos/200/200?1' },
  { uid: '2', name: 'avatar.png', status: 'success', url: 'https://picsum.photos/200/200?2' },
])
</script>

<template>
  <VxUpload
    v-model="files"
    action="/api/upload"
    list-type="picture-card"
    multiple
    accept="image/*"
    :limit="6"
  />
</template>

Multiple Files

Включите multiple, чтобы разрешить выбор нескольких файлов сразу.

<script setup lang="ts">
import { ref } from 'vue'
import type { UploadFile } from 'veloxui'

const files = ref<UploadFile[]>([])
</script>

<template>
  <VxUpload v-model="files" action="/api/upload" multiple />
</template>

File Limit

Установите limit, чтобы ограничить число файлов. Событие exceed срабатывает при попытке добавить больше.

Maximum 3 files

<script setup lang="ts">
import { ref } from 'vue'
import type { UploadFile } from 'veloxui'

const files = ref<UploadFile[]>([])

function handleExceed(files: File[], limit: number) {
  alert(`You can only upload ${limit} files.`)
}
</script>

<template>
  <VxUpload
    v-model="files"
    action="/api/upload"
    multiple
    :limit="3"
    @exceed="handleExceed"
    tip="Maximum 3 files"
  />
</template>

Max File Size

Установите max-size (в КБ), чтобы отклонять слишком большие файлы. Отклонённые файлы отображаются как ошибки с сообщением о размере.

Max 500KB per file

<script setup lang="ts">
import { ref } from 'vue'
import type { UploadFile } from 'veloxui'

const files = ref<UploadFile[]>([])
</script>

<template>
  <VxUpload
    v-model="files"
    action="/api/upload"
    :max-size="500"
    tip="Max 500KB per file"
  />
</template>

Custom Request

Используйте custom-request, чтобы самостоятельно обработать загрузку (например, с axios, S3 presigned URL и т. д.).

Using custom upload handler

<script setup lang="ts">
import { ref } from 'vue'
import type { UploadFile, UploadRequestOptions } from 'veloxui'

const files = ref<UploadFile[]>([])

function customUpload(options: UploadRequestOptions) {
  const formData = new FormData()
  formData.append('file', options.file)

  fetch('/api/upload', { method: 'POST', body: formData })
    .then(res => res.json())
    .then(data => options.onSuccess(data))
    .catch(err => options.onError(err.message))
}
</script>

<template>
  <VxUpload
    v-model="files"
    :custom-request="customUpload"
    multiple
  />
</template>

Pre-populated List

Передайте существующие файлы через v-model, чтобы показать предзаполненный список.

report.pdf239.3 KB

data.csv12.1 KB

<script setup lang="ts">
import { ref } from 'vue'
import type { UploadFile } from 'veloxui'

const files = ref<UploadFile[]>([
  { uid: '1', name: 'report.pdf', size: 245000, status: 'success' },
  { uid: '2', name: 'data.csv', size: 12400, status: 'success' },
])
</script>

<template>
  <VxUpload v-model="files" action="/api/upload" />
</template>

Disabled

file.pdf120.1 KB

<template>
  <VxUpload v-model="files" disabled />
</template>

Props

Prop	Type	Default	Description
modelValue	UploadFile[]	[]	Список файлов (v-model)
action	string	''	URL endpoint загрузки
headers	Record<string, string>	—	Пользовательские заголовки запроса
data	Record<string, string>	—	Дополнительные поля form data
name	string	'file'	Имя поля формы для файла
withCredentials	boolean	false	Отправлять cookie с запросом
accept	string	''	Принимаемые типы файлов (например image/*, .pdf)
multiple	boolean	false	Разрешить выбор нескольких файлов
limit	number	0	Макс. число файлов (0 = без ограничения)
maxSize	number	0	Макс. размер файла в КБ (0 = без ограничения)
disabled	boolean	false	Отключить загрузку
drag	boolean	false	Включить drag-and-drop зону
listType	'text' | 'picture' | 'picture-card'	'text'	Стиль отображения списка файлов
showFileList	boolean	true	Показывать список файлов под триггером
autoUpload	boolean	true	Загружать сразу при выборе
customRequest	(options: UploadRequestOptions) => void	—	Пользовательский обработчик загрузки
beforeUpload	(file: File) => boolean | Promise<boolean>	—	Хук перед началом загрузки
tip	string	''	Подсказка под триггером

Events

Event	Type	Description
update:modelValue	(files)	Список файлов изменён
change	(file, files)	Файл добавлен или его статус изменён
remove	(file, files)	Файл удалён
success	(file, response)	Загрузка успешна
error	(file, error)	Ошибка загрузки
progress	(file, percent)	Прогресс загрузки обновлён
exceed	(files, limit)	Превышен лимит файлов
preview	(file)	Запрошен предпросмотр файла (клик по имени или иконке глаза)

Slots

Slot	Description
default	Пользовательское содержимое триггера (заменяет внутреннюю часть кнопки или drag-зоны)
tip	Пользовательское содержимое подсказки под триггером

Exposed Methods

Method	Description
submit()	Вручную загрузить все файлы со status: 'ready' (когда autoUpload равен false)
trigger()	Программно открыть диалог выбора файлов

UploadFile Interface

interface UploadFile {
  uid: string           // Unique identifier
  name: string          // File name
  size?: number         // File size in bytes
  type?: string         // MIME type
  status: 'ready' | 'uploading' | 'success' | 'error'
  percent?: number      // Upload progress (0-100)
  url?: string          // File URL (for pre-existing files)
  thumbUrl?: string     // Thumbnail URL (auto-generated for images)
  raw?: File            // Original File object
  response?: any        // Server response
  error?: string        // Error message
}

UploadRequestOptions Interface

interface UploadRequestOptions {
  file: File
  onProgress: (percent: number) => void
  onSuccess: (response: any) => void
  onError: (error: string) => void
}