Сегодня я расскажу вам о загрузке с помощью 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; Это хороший источник вдохновения.