Загрузка файлов в Angular 13

Источник изображения

Что такое Angular?

Angular — это среда разработки программного обеспечения, основанная на TypeScript. Платформа Angular позволяет создавать масштабируемые, компонуемые веб-приложения. Она предоставляет набор инструментов разработчика для создания, тестирования и редактирования кода. Angular также предлагает несколько интегрированных библиотек, охватывающих широкий спектр функций, таких как управление формами, взаимодействие сервера и клиента и маршрутизация.

Angular позволяет масштабироваться от проекта одного разработчика до приложения корпоративного уровня. Дизайн Angular помогает упростить процессы обновления приложений, предоставляя самые современные возможности разработки. Разработчики могут создавать приложения с минимальными усилиями.

Компоненты Angular для загрузки файлов

Загрузка файлов в Angular основана на следующих компонентах.

FormData
Компонент FormData — это структура данных, которая может хранить пары ключ-значение. Он специально разработан для хранения данных формы и поддерживает JavaScript, позволяя создавать объекты, соответствующие HTML-формам. Этот компонент наиболее полезен для отправки данных формы в конечные точки RESTful API. Например, для загрузки одного или нескольких файлов можно использовать интерфейс XML HTTP-запроса или клиентскую библиотеку HTTP.

Чтобы создать объекты FormData, используйте оператор new для инстанцирования интерфейса FormData с помощью следующего сценария:

const formData = new FormData()

Элемент «formData» ссылается на экземпляр FormData. На объекте FormData можно вызывать различные методы для добавления пар данных и манипулирования ими. Каждая пара включает в себя ключ и значение.

HttpClient
Внешние приложения обычно взаимодействуют с сервером по протоколу HTTP, что позволяет им загружать и скачивать данные и получать доступ к сервисам на внутреннем сервере. Angular предлагает упрощенный клиентский HTTP API для приложений на базе Angular — класс HttpClient в @angular/common/http.

Реактивная форма
Реактивная форма использует неизменяемый, явный подход к управлению состоянием формы в определенные моменты времени. Все изменения состояния формы возвращают новые состояния, сохраняя целостность модели на протяжении всех изменений. Вы создаете реактивные формы на основе наблюдаемых потоков, предоставляя каждый вход и значение формы как часть потока входных значений. Эти потоки доступны синхронно.

Реактивные формы предлагают простой способ тестирования приложений Angular, поскольку вы можете убедиться, что запрашиваемые данные предсказуемы и последовательны. Все объекты, потребляющие потоки входных значений, могут безопасно получать доступ к соответствующим данным и манипулировать ими.

Пример загрузки файлов в Angular 13
Это сокращение из полного руководства Tuts Make.

Создание приложения Angular и импорт модулей
В этом разделе мы рассмотрим создание приложения Angular и научимся импортировать в него модули.

Чтобы создать демонстрационное приложение Angular:
Перейдите в терминал и используйте следующую команду для создания демонстрационного приложения Angular:

ng new my-new-app

Перейдите к файлу TypeScript с именем app.module.ts и импортируйте модули, необходимые для демонстрационного приложения Angular, с помощью следующего кода:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { DemoUploadAppComponent } from './app.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    DemoUploadAppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [DemoUploadAppComponent]
})
export class DemoUploadAppModule { }

Создание формы загрузки файлов
В этом руководстве создается демонстрационная реактивная форма Angular, которая принимает файл в качестве ввода и использует теги файла. Внешний вид формы будет находиться в отдельном файле, а функциональность будет храниться в другом.

Чтобы создать реактивную форму для загрузки файлов в приложение Angular:
Перейдите в каталог app и используйте следующий код в app.component.html, чтобы создать представление для формы.

<h1>Demo File Upload Form</h1>

Имя пользователя Имя пользователя обязательно. Имя пользователя должно быть не менее 3 символов. Файл Файл необходим для загрузки. Отправить форму

В том же каталоге приложения добавьте следующий код с элементами formGroup и formControl в файл component.ts.

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { FormGroup, FormControl, Validators} from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class DemoUploadAppComponent {
  myDemoUploadForm = new FormGroup({
    name: new FormControl('', [Validators.required, Validators.minLength(3)]),
    uploadedFile: new FormControl('', [Validators.required]),
    uploadedFileSource: new FormControl('', [Validators.required])
  });

  constructor(private http: HttpClient) { }

  get f(){
    return this.myDemoUploadForm.controls;
  }

  fileChangeHandler(event:any) {

    if (event.target.files.length > 0) {
      const uploadedFile = event.target.files[0];
      this.myDemoUploadForm.patchValue({
        uploadedFileSource: uploadedFile
      });
    }
  }

  submit(){
    const uploadFormData = new FormData();
    uploadFormData.append('uploadedFile', this.myDemoUploadForm.get('uploadedFileSource')?.value);

    this.http.post('http://localhost:8001/upload.php', uploadFormData)
      .subscribe(res => {
        console.log(res);
        alert('Uploaded Successfully.');
      })
  }
}

Добавление PHP-файла для загрузки и запуск сервера
Для демонстрационного приложения Angular, приведенного выше, требуется файл upload.php. Он помогает загрузить файл, который пользователь отправляет через форму, из приложения на сервер.

Чтобы создать PHP-файл для загрузки отправленного файла на сервер:
Создайте файл upload.php в каталоге приложения и поместите в него следующее:

<?php

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: PUT, GET, POST");    
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");

$uploadFolderPath = "uploadedFile/";
$uploadedFile_tmp = $_FILES['uploadedFile']['tmp_name'];
$uploadedFile_ext = strtolower(end(explode('.',$_FILES['uploadedFile']['name'])));
$uploadedFile = $uploadFolderPath . uniqid() . '.'.$uploadedFile_ext;
move_uploaded_file($uploadedFile_tmp, $uploadedFile);

?>

Use the following commands to start the demo Angular application and kickstart the PHP server:

ng serve
php -S localhost:8001

**

Заключение

В этой статье я показал, как настроить загрузку файлов в Angular 13 всего за несколько простых шагов:

1. Создайте приложение Angular и импортируйте модули
2. Создайте форму загрузки файлов
3. Добавьте PHP-файл для загрузки и запустите сервер.

Надеюсь, это поможет вам включить загрузку пользовательских файлов в ваших приложениях Angular. Счастливого кодинга!