Загрузите файлы своего проекта, которые могут быть загружены с той же позиции в случае возникновения ошибки или обновления страницы. Файл возобновляется с того же места, где он был прерван.
Иногда компоненты для загрузки файлов создать довольно сложно.
Вам нужно писать код на JavaScript. Кроме того, вам необходимо создать сервер и протестировать его несколько раз, прежде чем вы сможете развернуть его в своем приложении.
В этом уроке мы узнаем, как сделать и то, и другое.
Вы можете найти ссылку на полный код в конце этой статьи.
Предпосылка
Требуются базовые знания Angular и Node.
Настройка среды
Сначала мы создадим простой экспресс-сервер node.js.
Затем мы создадим приложение Angular и построим красивый пользовательский интерфейс, используя библиотеку компонентов пользовательского интерфейса Angular Material.
Окончательный результат будет выглядеть так:
Давайте погрузимся в код !!!
Создание экспресс-сервера
Мы будем создавать простой сервер node.js, используя экспресс, который позволяет загружать файлы.
Настройка нового проекта
Создайте новый каталог и инициализируйте новый проект, используя следующую команду. Он запросит некоторую информацию, вы можете заполнить детали или просто нажать Enter.
npm init
Создайте в своем каталоге файл с именем - - - - «app.js».
Установка внешних зависимостей
Нам нужно установить 3 внешние зависимости, а именно: express, body-parser, CORS.
Express - это среда веб-приложений для Node.js, предназначенная для создания веб-приложений и API. Установите экспресс, используя следующую команду.
npm install express --save
Совместное использование ресурсов между разными источниками - это механизм, который поможет нам получить доступ к API из приложения Angular. Установите CORS, используя следующую команду.
npm install cors --save
body - parser извлекает всю основную часть входящего потока запроса и выставляет его на req.body. Установите body-parser, используя следующую команду.
npm install body-parser
Настройка базового экспресс-сервера, включение CORS и добавление файловых систем, которые позволяют нам взаимодействовать с файловой системой. Файл app.js будет выглядеть так:
Понимание функциональности
Пользователь выберет файл, и как только он нажмет кнопку загрузки во внешнем интерфейсе, на сервер будет отправлен запрос с вопросом, существует ли файл в внутреннем каталоге или нет. Тогда у нас могут быть разные сценарии:
Случай 1. Файл существует с таким же размером: если размер существующего файла такой же, как размер загружаемого файла. Появится всплывающее сообщение «Файл уже существует».
Случай 2. Файл существует с другим размером: Если существующий файл имеет другой размер, сравните с размером загружаемого файла. Он начнет загрузку файла с той же позиции, в которую он был загружен. (Например: если размер файла составляет 1000 МБ, а файл 500 МБ уже загружен, он будет начинаться с 501 МБ).
Вариант 3 - файл не существует: загрузка файла начнется с самого начала.
Получение статуса файла
Как только мы получим запрос от внешнего интерфейса, он проверит 3 параметра для файла, то есть fileID, name и fileSize, которые будут полезны для получения информации о файле.
Мы проверим, существует ли файл или нет, используя fs.statSync в бэкэнд-папке «assets». Здесь я использовал папку «assets», но вы можете использовать любую папку по вашему выбору. Но убедитесь, что имя папки и имя в коде должны совпадать.
Затем он отправит ответ о деталях файла обратно в интерфейс.
Загрузка файла на сервер
Мы создадим объект загрузки, который будет извлекать файл в нескольких частях и сохранять файл в виде объекта.
Затем мы сохраним данные файла и инициализируем 4 разные переменные и получим их значения, используя заголовки, т.е.
- startByte: до фактического размера уже загруженного файла, если 0, то начать загрузку с начала.
- fileSize: чтобы узнать размер файла.
- name: узнать имя файла.
- fileId: для присвоения уникального идентификатора каждому файлу.
Затем мы напишем разные условия в зависимости от статуса файла загруженных данных.
Полный файл app.js:
Создание нового проекта загрузки возобновляемого файла Angular
Мы создали API, теперь мы можем приступить к созданию пользовательского интерфейса проекта (front-end).
Для этого создадим новый угловой проект. В этом проекте мы будем использовать angular-cli. Откройте командную строку (cmd) и перейдите к желаемому локации. Введите следующую команду в cmd.
ng new resumable-file-upload
Внешние зависимости
Включите библиотеку компонентов пользовательского интерфейса Angular Material в свой проект Angular для красивого пользовательского интерфейса. Он попросит ввести некоторые данные пользователя, но вы можете просто нажать Enter.
ng add @angular/materialФайл app.module.ts
Импортируйте различные модули, а именно
- HttpClientModule: полезно для отправки HTTP-запроса на сервер и получения ответа.
- FormsModule и ReactiveFormsModule: полезны для обработки данных формы.
- Модуль материала: модуль библиотеки компонентов пользовательского интерфейса Angular Material, полезный для создания красивого пользовательского интерфейса.
app.component.html Файл
Здесь мы напишем наш html-код, используя разные модули Angular Material, и инициализируем ввод с типом файла. Также добавьте счетчик коврика, который показывает красивую анимацию при начале загрузки файла.
Файл app.component.scss
Добавление базового стиля в проект
Файл app.component.ts
Теперь мы подключим наше интерфейсное приложение к серверным службам по протоколу HTTP. Мы будем импортировать различные модули из http, например:
HttpClient полезен для выполнения запросов Http. Каждый метод запроса имеет несколько сигнатур, и тип возвращаемого значения зависит от вызываемой сигнатуры (в основном это значения наблюдаемых и responseType).
HttpHeaders представляет параметры конфигурации заголовка для HTTP-запроса. Экземпляры неизменяемы.
HttpRequest представляет собой исходящий запрос, включая URL-адрес, метод, заголовки, тело и другие параметры конфигурации запроса.
HttpEventType - это перечисление типов для различных типов HttpEvents, таких как загрузка, загрузка, ответ и т. Д.
Теперь мы инициализируем переменные, полезные для получения пользователем сведений о загружаемом файле, такие как selectedFile, name, uploadPercent.
Затем мы создадим функцию с именем onFileSelect (), которая будет запускать событие, как только файл будет выбран пользователем, и отправит имя файла обратно в DOM.
Функция resumableUpload () будет отвечать за подключение интерфейса к серверу при получении ответов. Сначала он проверит, существует ли файл в бэкэнде или нет, проверив его имя и идентификатор файла, и сохранит данные в переменной с именем fileId.
Переменная headers будет хранить конфигурацию заголовка файла, используя HttpHeaders.
Если файл уже присутствует в серверной части, появится всплывающее окно с предупреждением о том, что «Файл уже существует». Он будет хранить загруженные байты в переменной uploadedBytes.
Если файл отсутствует в бэкэнде, он начнет загрузку файла с начала или с тех байтов, которые он уже загружен в бэкэнд, и покажет красивую анимацию с использованием mat-spinner.
Вывод:
Вот и все! Были сделаны!
использованная литература
Ваши отзывы приветствуются!
Если вам понравилась эта статья, похлопайте или поделитесь ею. Мы всегда ценим вашу помощь.
