Обработка загрузки

В библиотеке Naive UI компоненты, связанные с загрузкой данных или файлов, реализуются через NUpload и связанные утилиты. Основной принцип — предоставление пользователю понятного интерфейса загрузки и управление состояниями: ожидание, прогресс, успешная загрузка и ошибка.

Компонент NUpload

NUpload является ключевым элементом для загрузки файлов. Его использование включает настройку следующих свойств:

  • action — URL или функция для отправки данных на сервер.
  • headers — HTTP-заголовки для запроса.
  • data — дополнительные данные, передаваемые вместе с файлом.
  • multiple — возможность загрузки нескольких файлов одновременно.
  • accept — типы файлов, которые разрешено загружать.
  • max — ограничение на количество файлов.
  • before-upload — функция, вызываемая перед загрузкой каждого файла, позволяет проверять его размер или тип.
  • on-progress — обработчик прогресса загрузки.
  • on-success — обработчик успешной загрузки.
  • on-error — обработчик ошибок.

Пример базовой конфигурации:

import { NUpload, NButton } from 'naive-ui'

<NUpload
  action="https://example.com/upload"
  multiple
  :on-progress="handleProgress"
  :on-success="handleSuccess"
  :on-error="handleError"
>
  <NButton>Загрузить файл</NButton>
</NUpload>

Управление состояниями загрузки

1. Прогресс загрузки С помощью события on-progress можно отслеживать прогресс каждого файла. Аргументом является объект с полями percent и file:

function handleProgress({ percent, file }) {
  console.log(`${file.name}: ${percent}% загружено`)
}

2. Успешная загрузка Событие on-success вызывается после завершения загрузки и передачи ответа сервера:

function handleSuccess(response, file) {
  console.log(`${file.name} успешно загружен`, response)
}

3. Ошибки загрузки Обработка ошибок через on-error позволяет реагировать на проблемы с сетью или сервером:

function handleError(error, file) {
  console.error(`Ошибка при загрузке ${file.name}`, error)
}

Кастомизация кнопки и интерфейса загрузки

NUpload позволяет полностью кастомизировать визуальный интерфейс. Вместо стандартного NButton можно использовать любой компонент, включая иконки, прогресс-бары или текстовые уведомления:

<NUpload action="/upload">
  <template #trigger>
    <div class="custom-upload-trigger">
      Нажмите, чтобы выбрать файл
    </div>
  </template>
</NUpload>

С помощью слота #trigger можно создать индивидуальный дизайн, интегрируя его с текущей стилистикой приложения.

Ограничение и фильтрация файлов

Фильтрация по типу осуществляется через свойство accept, поддерживающее MIME-типы и расширения файлов:

<NUpload accept="image/png, image/jpeg">
  <NButton>Загрузить изображения</NButton>
</NUpload>

Проверка размера и типа перед загрузкой реализуется через before-upload:

function beforeUpload(file) {
  if (file.size / 1024 / 1024 > 2) {
    alert('Файл слишком большой. Максимум 2MB')
    return false
  }
  return true
}

Возврат false прерывает загрузку.

Асинхронная загрузка и серверные функции

Можно передавать в action не только строку URL, но и функцию, возвращающую Promise. Это позволяет интегрировать кастомные API или авторизацию:

function uploadFile(file) {
  return fetch('/upload', {
    method: 'POST',
    body: file,
  }).then(res => res.json())
}

<NUpload :action="uploadFile">
  <NButton>Загрузить файл</NButton>
</NUpload>

Такая архитектура обеспечивает гибкость и возможность обработки токенов, заголовков и динамических данных перед отправкой.

Многофайловая загрузка и управление очередью

Свойство multiple позволяет загружать несколько файлов сразу. Для управления порядком или ограничением по количеству используется max:

<NUpload multiple :max="5" action="/upload">
  <NButton>Загрузить до 5 файлов</NButton>
</NUpload>

Каждый файл отслеживается отдельно, что позволяет строить собственные прогресс-бары для каждого элемента.

Визуальная индикация состояния

Naive UI предоставляет интеграцию с компонентами NProgress и NMessage для отображения прогресса и уведомлений:

import { NMessage } from 'naive-ui'

function handleSuccess(response, file) {
  NMessage.success(`${file.name} успешно загружен`)
}
function handleError(error, file) {
  NMessage.error(`Ошибка при загрузке ${file.name}`)
}

Таким образом, интерфейс становится интерактивным, информативным и безопасным.

Вывод

Подход Naive UI к обработке загрузки файлов строится на:

  • Управлении состояниями (on-progress, on-success, on-error)
  • Проверке и фильтрации файлов (before-upload, accept, max)
  • Кастомизации интерфейса через слоты
  • Асинхронной загрузке с использованием функций

Эти возможности позволяют строить гибкие и безопасные интерфейсы загрузки файлов в современных веб-приложениях.

Оглавление