Загрузка файла Angular 9: Пример загрузки изображения Angular 9

В этой демонстрации загрузки изображений Angular мы будем использовать библиотеку ng2-file-upload для загрузки файла на внутренний сервер. Мы используем Node.js в качестве внутреннего сервера. Мы устанавливаем последнюю версию Angular с помощью Angular CLI , а затем начинаем работать над этой демонстрацией загрузки файлов Angular . Если вы новичок в Angular 9, ознакомьтесь с Учебником по Angular 9 .

Пример загрузки файла Angular 9

Чтобы загрузить файл в Angular, используйте библиотеку ng2-file-upload. Для обработки загруженных файлов на внутреннем сервере node.js мы используем библиотеку multer .

Шаги по загрузке изображения в Angular

Выполните следующие шаги.

1. Настройте проект Angular.
2. Установите библиотеку rxjs-compat.
3. Установите библиотеку начальной загрузки.
4. Установите библиотеку ng2-file-upload.
5. Создайте внутренний сервер node.js и используйте библиотеку multer.

Шаг 1. Настройте проект Angular

Теперь настройте проект angular с помощью следующей команды.

 ng new ng8fileupload 

Теперь разверните приложение angular с помощью следующей команды.

 ng serve --open 

Шаг 2: Установите библиотеку rxjs-compat

Итак, чтобы заполнить пробел между Angular 9 и сторонних пакетов, нам необходимо установить библиотеку rxjs-compat. Вот и все.

 npm install rxjs-compat --save 

Теперь, вы не получите никаких ошибок относительно каких-либо наблюдаемых rxjs.

Шаг 3. Установите Bootstrap CSS Library

Перейдите в свой терминал и введите следующую команду.

 npm install bootstrap --save 

Теперь включите указанный выше файл внутри файла angular.json .

 "styles": ["src/styles.css", "./node_modules/bootstrap/dist/ css/bootstrap.min.css "], 

Он будет включать библиотеку в приложение Angular.

Шаг 4: Установите ng-файл -upload library.

Введите следующую команду, чтобы установить библиотеку.

 npm install ng2-file-upload --save 

Теперь напишите следующий код внутри файла app.module.ts .

//app.module.tsimport {BrowserModule} from '@  angular/platform-browser '; импортировать {NgModule} из' @ angular/core '; импортировать {FileSel  ectDirective} из 'ng2-file-upload'; импортировать {FormsModule} из '@ angular/forms'; импортировать {AppComponent} из './app. component '; @ NgModule ({объявления: [AppComponent, FileSelectDirective], импорт: [BrowserModule, FormsModule], поставщики: [], bootstrap: [AppComponent]}) класс экспорта AppModule {} 

Мы импортировали FileSelectDirective из

Кроме того, нам необходимо импортировать FormsModule , потому что нам нужно написать компонент загрузки файла, из которого мы можем загрузить файл на сервер.

Теперь напишите следующий код внутри app.component .ts файл.

//app.component.tsimport {Component, OnInit} from '@ angular/core'; import {FileUploader, FileSelectDirective} из 'ng2-file-upload /ng2-file-upload '; const URL =' http://localhost: 4000/api/upload '; @Component ({selector:' app-root ', templateUrl:' ./app.component.html ', styleUrls  : ['./app.component.css'pting})export class AppComponent реализует OnInit {title =' ng8fileupload ';  общедоступный загрузчик: FileUploader = новый FileUploader ({url: URL, itemAlias: 'photo'});  ngOnInit () {this.uploader.onAfterAddingFile = (файл) => {file.withCredentials = false;  };  this.uploader.onCompleteItem = (элемент: любой, ответ: любой, статус: любой, заголовки: любые) => {console.log ('ImageUpload: загружено:', элемент, статус, ответ);  alert ('Файл успешно загружен');  };  }} 

В приведенном выше коде мы импортировали FileUploader и FileSelectDirective из ng2-file- upload .

Кроме того, мы определили URL-адрес серверного API, который имеет вид http://localhost: 4000/api/upload.

Мы создадим внутренний сервер в Node.js , а затем отправим на сервер запрос POST.

Итак, у нас есть использовали метод жизненного цикла Angular Component под названием

Мы написали код загрузки файла внутри функции ngOnInit.

Теперь осталось только написать HTML-код для компонента загрузки файла.

Напишите следующий фрагмент кода внутри app.component .html файл.

 
   Загрузить изображение 
 

Теперь перейдите по URL-адресу http://localhost: 4200/ и посмотрите результат.

Теперь осталось только для создания серверной части в Node.js.

Шаг 5. Создайте сервер Node.js для обработки файловых запросов.

Сначала установите следующие модули узлов.

 npm install express multer body-parser dotenv --save 

Установить nodemon как зависимость разработчика.

 npm install nodemon -  save-dev 

Создайте новый каталог в корне проекта angular с именем

Хорошо, теперь создайте один файл в корневой папке проекта angular под названием

Напишите следующий фрагмент кода внутри файла server.js .

//server.jsconst path = require ('path'); const express = require ('express'); const multer = require ('multer'); const bodyParser = require ('body  -parser ') const приложение = экспресс (); const DIR =' ./uploads ';  let storage = multer.diskStorage ({назначение: (req, file, cb) => {cb (null, DIR);}, filename: (req, file, cb) => {cb (null, file.fieldname + '  - '+ Date.now () +'. '+ Path.extname (file.originalname));}}); let upload = multer ({storage: storage}); app.use (bodyParser.json ());  app.use (bodyParser.urlencoded ({extended: true}));  app.use (function (req, res, next) {res.setHeader ('Access-Control-Allow-Origin', 'http://localhost: 4200'); res.setHeader ('Access-Control-Allow-Methods  ',' POST '); res.setHeader (' Access-Control-Allow-Headers ',' X-Requested-With, content-type '); res.setHeader (' Access-Control-Allow-Credentials ', true)  ; следующий();});  app.get ('/api', function (req, res) {res.end ('пример ловушки файлов');});  app.post ('/api/upload', upload.single ('photo'), function (req, res) {if (! req.file) {console.log ("Файл не получен"); return res.send  ({успех: ложь});} еще {console.log ('файл получен'); возврат res.send ({успех: истина})}});  const PORT = process.env.PORT ||  4000;  app.listen (PORT, function () {console.log ('Сервер Node.js работает на порту' + PORT);}); 

Сначала мы использовали process.env. Работа с переменными среды — отличный способ настроить различные конфигурации вашего приложения Node.js.

Если переменная среды PORT определена внутри файла .env, тогда она будет принимать значение этой переменной; в противном случае он выберет значение по умолчанию, а в нашем случае это 4000.

Итак, node.js будет раскручиваться на порту 4000.

Мы импортировали библиотеку multer . Это совместимая с node.js библиотека для обработки файлов или изображений в node.js.

Мы можем сохранить файл, используя функцию хранения файлов Multer.

Когда HTTP-запрос POST файла поступает на сервер node.js, сначала мы использовали модуль парсера тела, который анализирует данные запроса, а затем переходим к функции multer, извлекаем файл из запроса и добавляем метку времени. к имени файла и сохраните файл в каталоге uploads . Мы уже определили каталог.

Последний шаг — запустить узел. js, используя следующий код.

 nodemon server 

Теперь перейдите во внешний интерфейс и попробуйте загрузить файл. Я пытаюсь загрузить изображение, и оно успешно загружено. Вы можете увидеть alert () в интерфейсе.

Это основной пример загрузки изображения в Angular 9. Если вы хотите изменить размер изображения с помощью node.js, ознакомьтесь с моим руководством по изменению размера изображения в Node.js.

Также см. uploads , чтобы увидеть, сохранено изображение или нет.

Вы можете найти дополнительные параметры в официальной документации ng2-file-upload.

Наконец, Пример загрузки файла Angular 9 завершен. Спасибо за это.

Рекомендуемые сообщения

Angular 9 HttpClient

Angular 9 Observables

Пример Angular NgFor

Angular NgStyle

Пример Angular NgModel

Angular NgClass