Сегодня я расскажу вам о загрузке с помощью Angular. Для этого воспользуемся библиотекой ngx-upload. это позволяет выполнять загрузку с помощью перетаскивания и легко обрабатывать события. Ngx-upload отличается агностическим характером; другими словами, его можно интегрировать в любую структуру презентации.

Настраивать

Лучший способ установить ngx-upload — через npm или yarn следующим образом:

npm install @wkoza/ngx-upload

or

yarn add @wkoza/ngx-upload

Теперь вам нужно добавить модуль с именем NgxUploadModule в ваш AppModule , что часто бывает:

Я также должен добавить модуль HttpClientModule , чтобы выполнить загрузку.

Создайте зону перетаскивания

С помощью ngx-upload создать зону перетаскивания легко с помощью директивы ngxDragAndDrop . Простая <div> с этой директивой позволяет перетаскивать файл в очередь загрузки.

Класс css здесь, чтобы указать размер, стиль курсора, непрозрачность:

Итак, вам просто нужно добавить этот <div> в свой компонент шаблона и класс css, который определяет размер вашей зоны перетаскивания; обычно мы хотим реагировать с помощью стиля css, когда файл находится в зоне перетаскивания и когда файл перетаскивается. С ngx-upload это настраивается с помощью DropTargetOptions. Этот объект имеет 3 свойства для изменения класса css в отношении события drop:

  • Когда вы перетаскиваете файл в зону со свойством dropZoneColorDrag
  • При удалении файла со свойством dropZoneColorDrop
  • В остальных случаях со свойством dropZoneColor

Например, вы можете использовать 3 класса css:

Чтобы глобально связать эти классы с ngx-upload, вам необходимо создать объект типа DropTargetOptions , например:

и добавьте этот объект в статический метод forRoot():

Вы также можете передать этот объект ngxDragAndDrop directive следующим образом:

Добавить файловый менеджер

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

В этом случае файловый менеджер откроется, когда пользователь нажмет на зону перетаскивания; При желании вы можете использовать эту структурную директиву с кнопкой. Реализация зависит от вашего фреймворка пользовательского интерфейса.

С бутстрапом у вас есть простая реализация:

С материалом немного сложнее, но ничего серьезного:

*ngxInputFile поддерживает объект конфигурации типа InputFileOptions. Например:

Есть 3 свойства:

  • accept Один или несколько уникальных спецификаторов типов файлов, описывающих разрешенные типы файлов. полный список можно посмотреть здесь
  • capture Какой источник использовать для захвата изображения или видеоданных. Значения: «пользователь» или «среда».
  • multiple Логическое значение, которое, если оно присутствует, указывает, что пользователь может выбрать более одного файла. По умолчанию true.

Очередь загрузки

Каждый файл добавляется в очередь, которую вы можете обработать с помощью HttpClientUploadService. Эта служба предлагает 7 Observable для обработки определенного поведения:

  • onCancel$ : этот Observable генерируется при отмене загрузки.
  • onError$<{ item: FileItem, body: any, status: number, headers: any }>: этот Observable выдает ошибку в процессе загрузки.
  • onSuccess$<{ item: FileItem, body: any, status: number, headers: any }> : этот Observable срабатывает в случае успеха.
  • onBeforeUploadItem$: этот Observable генерируется непосредственно перед процессом загрузки.
  • onProgress$<{ item: FileItem, progress: number }>: этот Observable излучается во время процесса загрузки.
  • onAddToQueue$<>: этот Observable срабатывает, когда файл добавляется в очередь.
  • onDropError$<{ item?: File, errorAccept: boolean, errorMultiple: boolean }>: этот Observable срабатывает, когда файл не принят в очередь.

Вот пример:

Это хороший способ обработать ошибку или предупредить пользователя.

Теперь последний шаг — создание вашего HTML-шаблона, где мы можем увидеть содержимое вашей очереди и узнать, как запустить загрузку; Это пример, который может помочь вам разобраться с API:

Нужно помнить, что HttpClientUploadService предлагает свойство с именем queue где хранятся файлы; Таким образом, вы можете определить количество файлов в очереди или перечислить файл с помощью простого *ngFor. queue содержит список FileItem объектов. FileItem имеет API, аналогичный HttpClientUploadService. Вы можете загрузить, отменить или удалить этот файл из очереди. HttpClientUploadService обрабатывает все файлы одновременно.

Наконец, проект предлагает две реализации с Bootstrap и Material; Это хороший источник вдохновения.