Кастомная логика upload

Компонент n-upload в Naive UI предоставляет гибкий интерфейс для загрузки файлов, поддерживая как простую загрузку, так и сложные сценарии с кастомной логикой обработки. Важнейшей особенностью является возможность полностью контролировать процесс загрузки через пропсы onBeforeUpload, onChange, customRequest и onRemove.

Пропсы для управления поведением:

  • action — URL, на который отправляется файл. Может быть пустым, если используется кастомная логика.
  • multiple — разрешает выбор нескольких файлов.
  • show-file-list — отображение списка загруженных файлов.
  • onBeforeUpload — функция, вызываемая перед загрузкой файла. Можно отменить загрузку или изменить файл.
  • customRequest — полностью кастомная функция для обработки отправки файла на сервер.
  • onChange — вызывается при изменении состояния файла (загрузка, успех, ошибка).
  • onRemove — логика удаления файла из списка или с сервера.

Создание кастомной логики загрузки

Для полного контроля над процессом загрузки рекомендуется использовать customRequest. Она позволяет обрабатывать файлы вручную и интегрироваться с любым API или серверной логикой.

Пример кастомного запроса:

import { ref } from 'vue';
import { NUpload, NButton } from 'naive-ui';

const fileList = ref([]);

function handleCustomUpload({ file, onProgress, onError, onSuccess }) {
  const formData = new FormData();
  formData.append('file', file);

  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/api/upload');

  xhr.upload.onprogr ess = (event) => {
    if (event.lengthComputable) {
      const percent = (event.loaded / event.total) * 100;
      onProgress({ percent });
    }
  };

  xhr.onl oad = () => {
    if (xhr.status === 200) {
      onSuccess(JSON.parse(xhr.response));
    } else {
      onError(new Error(`Ошибка загрузки: ${xhr.statusText}`));
    }
  };

  xhr.oner ror = () => onError(new Error('Сетевая ошибка'));
  xhr.send(formData);
}

В данном примере используется XMLHttpRequest, что позволяет отслеживать прогресс загрузки через onProgress и корректно обрабатывать ошибки через onError.

Валидация и фильтрация файлов

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

function validateFile(file) {
  const isImage = file.type.startsWith('image/');
  const isLt2M = file.size / 1024 / 1024 < 2;

  if (!isImage) {
    return false; // Отмена загрузки
  }
  if (!isLt2M) {
    return false; // Отмена загрузки
  }
  return true;
}

Использование с компонентом:

<n-upload
  :file-list="fileList"
  :on-before-upload="validateFile"
  :custom-request="handleCustomUpload"
>
  <n-button>Выбрать файл</n-button>
</n-upload>

Управление состоянием файлов

Список файлов хранится в реактивной переменной (ref или reactive). Каждое изменение состояния файла можно отследить через onChange:

function handleChange(file, fileList) {
  console.log('Состояние файла:', file.status);
  console.log('Текущий список файлов:', fileList);
}

Полезно обновлять интерфейс или отображать сообщения пользователю в зависимости от статуса (ready, uploading, success, error).

Удаление и отмена загрузки

Пропс onRemove позволяет контролировать процесс удаления файла:

function handleRemove(file) {
  // Можно отправить запрос на сервер для удаления
  return fetch(`/api/delete/${file.name}`, { method: 'DELETE' })
    .then(() => true)
    .catch(() => false);
}

Если возвращается false, файл не удаляется из списка. Для отмены активной загрузки можно хранить xhr объект в объекте файла и вызывать xhr.abort().

Интеграция с прогресс-индикаторами

Naive UI предоставляет n-progress и встроенные индикаторы внутри n-upload. Использование onProgress из кастомного запроса позволяет динамически обновлять процент загрузки:

<n-progress :percentage="file.percent" />

Поддержка drag-and-drop

Проп drag позволяет включить drag-and-drop интерфейс. Компонент поддерживает события onDrop и onDragOver, которые можно расширять для кастомной логики:

<n-upload
  :drag="true"
  :custom-request="handleCustomUpload"
  :on-change="handleChange"
>
  Перетащите файл сюда
</n-upload>

Совмещение с другими компонентами

Компонент n-upload можно интегрировать с n-button, n-card, n-notification, чтобы создавать удобный интерфейс с кастомными кнопками выбора, уведомлениями об ошибках и прогрессом.

Пример уведомления при успешной загрузке:

import { createDiscreteApi } from 'naive-ui';
const { notification } = createDiscreteApi(['notification']);

function handleSuccess(file) {
  notification.success({
    title: 'Файл загружен',
    content: file.name
  });
}

Вывод

Кастомная логика в n-upload позволяет полностью контролировать процесс загрузки: от валидации и фильтрации файлов до ручной отправки на сервер и отслеживания прогресса. Комбинация customRequest, onBeforeUpload, onChange и onRemove обеспечивает максимальную гибкость и интеграцию с любыми интерфейсами и API.

Оглавление