Предпросмотр файлов

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

Компонент n-upload и его возможности

n-upload предоставляет следующие ключевые возможности:

  • Загрузка файлов с сервера или локального хранилища.
  • Фильтрация типов файлов через свойства accept (например, "image/*" для изображений).
  • Предварительный просмотр файлов с помощью встроенного метода on-preview.
  • Поддержка drag-and-drop для удобного добавления файлов.
  • Настройка ограничений по размеру через max-size и количеству файлов через max.
  • Пользовательская обработка загрузки, включая асинхронные запросы.

Пример базового использования:

<template>
  <n-upload
    :action="uploadUrl"
    :list-type="'picture-card'"
    :on-preview="handlePreview"
    :file-list="fileList"
    accept="image/*"
  />
</template>

<script setup>
import { ref } from 'vue'

const uploadUrl = 'https://api.example.com/upload'
const fileList = ref([])

function handlePreview(file) {
  console.log('Предпросмотр файла:', file.name)
}
</script>

Ключевые моменты:

  • list-type="picture-card" отображает файлы в виде карточек с миниатюрами.
  • on-preview отвечает за запуск модального окна или другого элемента для предпросмотра.
  • accept ограничивает выбор файлов только указанными типами.

Настройка предпросмотра изображений

Naive UI позволяет отображать миниатюры изображений и открывать их в полноэкранном режиме. Для этого используется объект file с полями name, url и status.

function handlePreview(file) {
  if (file.url) {
    window.open(file.url, '_blank') // Открытие изображения в новой вкладке
  } else {
    // Генерация временного URL для локального файла
    const reader = new FileReader()
    reader.onl oad = (e) => {
      const imgWindow = window.open()
      imgWindow.document.write(`<img src="${e.target.result}" />`)
    }
    reader.readAsDataURL(file.raw)
  }
}

Особенности:

  • file.url используется для уже загруженных на сервер файлов.
  • file.raw содержит объект File, который позволяет создавать временный Data URL для локального предпросмотра.
  • Метод FileReader обеспечивает генерацию миниатюр без необходимости отправки на сервер.

Интеграция с модальными окнами

Для более удобного интерфейса предпросмотра часто используют n-dialog для отображения изображения в модальном окне:

<template>
  <n-upload
    :action="uploadUrl"
    :list-type="'picture-card'"
    :file-list="fileList"
    :on-preview="openPreview"
    accept="image/*"
  />
  <n-dialog v-model:show="previewVisible" :show-footer="false">
    <img :src="previewImage" style="width:100%" />
  </n-dialog>
</template>

<script setup>
import { ref } from 'vue'

const fileList = ref([])
const previewVisible = ref(false)
const previewImage = ref('')

function openPreview(file) {
  if (file.url) {
    previewImage.value = file.url
  } else {
    const reader = new FileReader()
    reader.onl oad = (e) => {
      previewImage.value = e.target.result
    }
    reader.readAsDataURL(file.raw)
  }
  previewVisible.value = true
}
</script>

Преимущества:

  • Полноэкранный просмотр без необходимости открытия новой вкладки.
  • Возможность добавления кастомных кнопок, например, для удаления или скачивания файла.
  • Управление состоянием модального окна через реактивные переменные Vue.

Ограничение типа и размера файлов

Naive UI позволяет контролировать допустимые файлы с помощью следующих свойств:

  • accept — фильтрация по MIME типам.
  • max-size — ограничение максимального размера файла в байтах.
  • before-upload — функция, вызываемая перед загрузкой, где можно реализовать кастомную проверку:
function beforeUpload(file) {
  if (file.size / 1024 / 1024 > 2) {
    alert('Файл слишком большой, максимум 2 МБ')
    return false
  }
  return true
}

Отображение прогресса загрузки

Свойство on-progress позволяет отслеживать состояние загрузки каждого файла:

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

Можно визуализировать прогресс через n-progress, связывая его с процентом загрузки.

Поддержка нескольких файлов

Для работы с несколькими файлами используется свойство multiple:

<n-upload
  multiple
  :action="uploadUrl"
  :list-type="'picture-card'"
  :on-preview="openPreview"
  accept="image/*"
/>

Особенности:

  • Все загруженные файлы отображаются в виде сетки.
  • Можно ограничить количество файлов через max.
  • file-list хранит массив объектов файлов, с которыми можно взаимодействовать (удаление, предпросмотр, сортировка).

Работа с неизображениями

Для документов, видео или аудио можно использовать list-type="text" или list-type="image" с кастомными иконками:

<n-upload
  :action="uploadUrl"
  :list-type="'text'"
  :file-list="fileList"
  :on-preview="handlePreview"
  accept=".pdf,.docx,.txt"
/>

В этом случае предпросмотр реализуется через открытие файла в новом окне или запуск плеера для видео/аудио.

Комбинированное использование с другими компонентами Naive UI

  • n-button — для вызова окна выбора файлов вручную.
  • n-tooltip — для отображения информации о файле при наведении.
  • n-progress — для кастомной визуализации загрузки.
  • n-dialog — для полноценного модального предпросмотра.

Такое сочетание позволяет создавать полноценный интерфейс управления файлами, полностью интегрированный с остальной визуальной системой Naive UI.

Оглавление