Загрузка файлов

Компонент на базе нативного <input type="file"> + зоны перетаскивания. Запрос предоставляется использующей стороной через проп request (библиотека не имеет ни одной runtime-зависимости и не встроен HTTP-клиент).

Базовое использование

Базовое использование

Выбрать файл

<script setup lang="ts">
</script>

<template>
  <LhUpload :max-size="1048576" :accept="['.png', '.jpg']" />
</template>

<script>
export default {}
</script>

<template>
  <LhUpload :max-size="1048576" :accept="['.png', '.jpg']" />
</template>

accept также поддерживает запись в виде строки через запятую (например accept=".png,.jpg", статический атрибут прописывается непосредственно).

Перетаскивание + пользовательский запрос

Загрузка перетаскиванием

Перетащите файлы сюда или нажмите для загрузки

<script setup>
const fakeRequest = ({ file, onProgress }) =>
  new Promise((resolve) => {
    let percent = 0
    const timer = setInterval(() => {
      percent += 20
      onProgress(percent)
      if (percent >= 100) {
        clearInterval(timer)
        resolve({ url: `https://example.com/${file.name}` })
      }
    }, 200)
  })
</script>

<template>
  <!-- Загрузка перетаскиванием -->
  <LhUpload drag :multiple="true" :request="fakeRequest" />
</template>

<script>
export default {
  methods: {
    fakeRequest({ file, onProgress }) {
      return new Promise((resolve) => {
        let percent = 0
        const timer = setInterval(() => {
          percent += 20
          onProgress(percent)
          if (percent >= 100) {
            clearInterval(timer)
            resolve({ url: `https://example.com/${file.name}` })
          }
        }, 200)
      })
    },
  },
}
</script>

<template>
  <!-- Загрузка перетаскиванием -->
  <LhUpload drag :multiple="true" :request="fakeRequest" />
</template>

Отключение и ограничение количества

disabled отключает загрузку; max-count ограничивает максимальное количество загружаемых файлов.

Отключение / ограничение количества

Выбрать файл

Выбрать файл

<script setup lang="ts">
</script>

<template>
  <LhUpload disabled />
  <LhUpload :max-count="2" />
</template>

<script>
export default {}
</script>

<template>
  <LhUpload disabled />
  <LhUpload :max-count="2" />
</template>

API

LhUpload Props

Свойство	Описание	Тип	Значение по умолчанию
multiple	Разрешить множественный выбор	boolean	false
drag	Зона загрузки перетаскиванием	boolean	false
disabled	Отключить	boolean	false
accept	Допустимые расширения / MIME: массив (['.png', 'image/*']) или строка через запятую ('.png,.jpg')	string | string[]	() => []
maxSize	Максимальный размер одного файла (в байтах)	number	[LH_UPLOAD_MAX_SIZE](#const-LH_UPLOAD_MAX_SIZE)
maxCount	Ограничение количества (0 — без ограничений)	number	0
request	Функция запроса на загрузку (если не передана — выполняется только локальный выбор и валидация)	(options: { file: File; onProgress: (percent: number) => void; }) => Promise<{ url?: string; }>	—
sx	Свойства быстрой раскладки sx	LhSxProps	—

События

Событие	Описание	Параметры колбэка
change	Срабатывает при изменении списка файлов (добавление файла, завершение загрузки, удаление файла)	(files: LhUploadFile[])
success	Срабатывает после успешной загрузки одного файла	(file: LhUploadFile)
error	Срабатывает при неудачной загрузке одного файла	(file: LhUploadFile, reason: string)
remove	Срабатывает после удаления файла	(uid: string)

Слоты: default (содержимое зоны-триггера).

LhUploadRequest

(options: { file: File; onProgress: (percent: number) => void }) => Promise<{ url?: string }>

Доступность

• Нативный <input type="file"> визуально скрыт, но остаётся в дереве доступности, именуется через aria-label
• Зона-триггер: role="button" + tabindex + Enter/Space открывают выбор файла; при отключении элемент исключается из интерактивных элементов
• Индикатор прогресса: role="progressbar" + aria-valuenow/min/max; при неудачной валидации объявление через role="alert"; у каждой кнопки удаления файла в качестве доступного имени используется имя файла

Типы

Экспортируемые компонентом структуры TypeScript (автоматически извлечено из packages/components/upload/src/types.ts и исходников @lh-ui/share/core/*; раскройте каждый раздел, чтобы увидеть полное определение; описания свойств — в таблице Props выше):

LhUploadProps

export interface LhUploadProps {
  /** Разрешить множественный выбор */
  multiple?: boolean
  /** Зона загрузки перетаскиванием */
  drag?: boolean
  /** Отключить */
  disabled?: boolean
  /** Допустимые расширения / MIME: массив `['.png', 'image/*']` или строка через запятую `'.png,.jpg'` */
  accept?: string[] | string
  /** Максимальный размер одного файла (в байтах) */
  maxSize?: number
  /** Ограничение количества (0 — без ограничений) */
  maxCount?: number
  /** Функция запроса на загрузку (если не передана — выполняется только локальный выбор и валидация) */
  request?: LhUploadRequest
  /** Свойства быстрой раскладки sx */
  sx?: LhSxProps
}

LhUploadRequest _{(из @lh-ui/share/core/upload)}

/** Сигнатура функции запроса на загрузку (предоставляется использующей стороной; библиотека не встроен HTTP-клиент) */
export type LhUploadRequest = (options: {
  file: File
  onProgress: (percent: number) => void
}) => Promise<{ url?: string }>

LhUploadFileStatus _{(из @lh-ui/share/core/upload)}

/** Состояние элемента файла */
export type LhUploadFileStatus = 'ready' | 'uploading' | 'success' | 'fail'

LhUploadFile _{(из @lh-ui/share/core/upload)}

/** Элемент загружаемого файла */
export interface LhUploadFile {
  /** Уникальный идентификатор (генерируется внутри или предоставляется пользователем) */
  uid: string
  /** Имя файла */
  name: string
  /** Размер в байтах */
  size: number
  /** Состояние */
  status: LhUploadFileStatus
  /** Прогресс загрузки 0-100 */
  percent: number
  /** Адрес, возвращённый сервером (в случае успеха) */
  url?: string
  /** Причина неудачи */
  error?: string
  /** Исходный объект File */
  raw?: File
}

Константы

Публичные константы, используемые данным компонентом (в столбце «Тип / значение по умолчанию» таблицы Props можно нажать на имя константы, чтобы перейти к ней):

LH_UPLOAD_MAX_SIZE _{(из @lh-ui/share/core/upload)}

/** Максимальный размер по умолчанию — 5 МБ */
export const LH_UPLOAD_MAX_SIZE = 5 * 1024 * 1024