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

Загрузка файлов. Библиотека не содержит HTTP-клиента: фактическую передачу берёт на себя prop request (onProgress возвращает прогресс, resolve промиса означает успех); поддерживаются перетаскивание, множественный выбор, ограничения количества / размера / типа и повторная попытка при неудаче.

<template>
  <div class="demo-col">
    <LhUpload
      multiple
      :max-count="3"
      :max-size="2097152"
      accept="image/*"
      :request="fakeRequest"
      @change="onChange"
      @success="onSuccess"
      @error="onError"
    >
      <LhButton type="primary">Выбрать файлы (до 3 шт., каждый ≤ 2 МБ)</LhButton>
    </LhUpload>
    <LhUpload drag :request="fakeRequest">
      <div style="padding: 20px 0">
        <p class="demo-note" style="font-size: 14px">Перетащите файлы сюда или нажмите для загрузки</p>
        <p class="demo-note">Поддержка перетаскивания (режим drag)</p>
      </div>
    </LhUpload>
    <LhUpload multiple :max-count="5" accept=".png,.jpg" :request="fakeRequest" disabled>
      <LhButton disabled>Отключённое состояние (accept в виде массива .png/.jpg)</LhButton>
    </LhUpload>
    <p class="demo-note">Статус: {{ status }}</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    status: '(не загружено)',
  }),
  methods: {
    fakeRequest(opts) {
      const { file, onProgress } = opts
      return new Promise((resolve) => {
        let percent = 0
        const timer = setInterval(() => {
          percent += 25
          if (percent >= 100) {
            clearInterval(timer)
            onProgress(100)
            resolve({ url: `/assets/${file.name}` })
          } else {
            onProgress(percent)
          }
        }, 200)
      })
    },
    onChange(files) {
      this.status = `Всего файлов в списке: ${files.length}`
    },
    onSuccess(file) {
      var _a
      this.status = `Загружено: ${(_a = file.name) !== null && _a !== void 0 ? _a : ''}`
    },
    onError(file, reason) {
      var _a
      this.status = `Ошибка загрузки: ${(_a = file.name) !== null && _a !== void 0 ? _a : ''} (${String(reason)})`
    },
  },
}
</script>

# Props

Проп	Описание	Тип	По умолчанию
multiple	Множественный выбор	`boolean`	`false`
drag	Режим загрузки перетаскиванием	`boolean`	`false`
disabled	Отключено	`boolean`	`false`
accept	Принимаемые типы файлов (`'.png,.jpg'` или массив)	`string \\| string[]`	—
maxSize	Максимальный размер одного файла (байт)	`number`	—
maxCount	Максимальное количество файлов (0 — без ограничений)	`number`	`0`
request	Функция запроса на загрузку (библиотека не содержит HTTP-клиента)	`LhUploadRequest`	—
sx	Компактная раскладка через sx	—	—

Сигнатура LhUploadRequest: (options: { file: File; onProgress: (percent: number) => void }) => Promise<{ url?: string }> — resolve промиса вызывает success, reject (или исключение) вызывает error.

# Events

change (files), success (file), error (file, reason), remove (uid)

# Slots

Слот	Описание
default	Содержимое зоны вызова (по умолчанию выводится подсказка «Нажмите для загрузки / перетащите сюда»)

# Доступность

Зона вызова — role="button" + tabindex (открытие диалога выбора файла клавишами Enter / Space), aria-disabled указывает отключённое состояние; строка загружаемого файла снабжена role="progressbar" + aria-valuenow, а сообщение о провале проверки — role="alert".

← Дерево-выбор Форма →