В этой статье я объясню только клиент. Но вы можете узнать, как подготовить свой сервисный слой, в статье Загрузка любого объекта в Amazon S3 через rest API в .Net Core 2 Web API.

ПРИМЕЧАНИЕ. Этот пример охватывает версии Angular 4+. Ниже версии 4.0 функция прогресса загрузки может отсутствовать.

Начнем с сервисного слоя;

Мы будем загружать изображения отсюда. Вы можете изменить структуру как глобальный сервис для загрузки изображений, но для меня; Я буду упрощать только один метод, чтобы показать вам основной процесс.

Затем компонент;

Здесь мы возьмем изображение из слоя просмотра и скажем службе загрузить входящее изображение. Кроме того, в зависимости от вашего выбора, вы можете показать процесс загрузки, взяв его из сервиса.

Затем просмотреть

Резюме;

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

Я надеюсь, что вы найдете эту статью полезной, если вы считаете, что она устарела или неверна, свяжитесь со мной и исправьте ее вместе. Спасибо.