Angular 14: Загрузка нескольких изображений с предварительным просмотром
В этом руководстве мы узнаем, как загружать несколько изображений с предварительным просмотром в приложениях angular 14, используя остальные службы веб-API в приложениях angular 14, чтобы загружать несколько изображений в каталог сервера.
Angular 14: Загрузка нескольких изображений с предварительным просмотром
Используйте следующие шаги, чтобы загрузить несколько изображений с предварительным просмотром в приложения angular 14:
Шаг 1 - Создайте новое приложение Angular
Прежде всего, откройте свой терминал и выполните в нем следующую команду, чтобы установить приложение angular:
ng new my-new-app
Шаг 2 - Импорт модуля
Затем откройте файл app.module.ts и импортируйте HttpClientModule, FormsModule и ReactiveFormsModule в файл app.module.ts следующим образом:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Шаг 3 - Создайте форму загрузки нескольких изображений в файле просмотра
Создайте простую форму с элементом входного файла и тегом изображения. Итак, посетите src/app/app.component.html и обновите в нем следующий код:
<h1>Angular 14 Multiple Image Upload with Preview</h1>
<form [formGroup]="myForm" (ngSubmit)="submit()">
<div class="form-group">
<label for="name">Name</label>
<input
formControlName="name"
id="name"
type="text"
class="form-control">
<div *ngIf="f['name'].touched && f['name'].invalid" class="alert alert-danger">
<div *ngIf="f['name'].errors && f['name'].errors['required']">Name is required.</div>
<div *ngIf="f['name'].errors && f['name'].errors['minlength']">Name should be 3 character.</div>
</div>
</div>
<div class="form-group">
<label for="file">File</label>
<input
formControlName="file"
id="file"
type="file"
class="form-control"
multiple=""
(change)="onFileChange($event)">
<div *ngIf="f['file'].touched && f['file'].invalid" class="alert alert-danger">
<div *ngIf="f['file'].errors && f['file'].errors['required']">File is required.</div>
</div>
</div>
<img *ngFor='let url of images' [src]="url" height="150" width="200px" style="margin: 3px;"> <br/>
<button class="btn btn-primary" [disabled]="myForm.invalid" type="submit">Submit</button>
</form>
Шаг 4 - Обновите файл ts компонента
Посетите каталог src/app и откройте app.component.ts. Затем добавьте следующий код, например элемент 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 AppComponent {
images : string[] = [];
/*------------------------------------------
--------------------------------------------
Declare Form
--------------------------------------------
--------------------------------------------*/
myForm = new FormGroup({
name: new FormControl('', [Validators.required, Validators.minLength(3)]),
file: new FormControl('', [Validators.required]),
fileSource: new FormControl('', [Validators.required])
});
/*------------------------------------------
--------------------------------------------
Created constructor
--------------------------------------------
--------------------------------------------*/
constructor(private http: HttpClient) { }
/**
* Write code on Method
*
* @return response()
*/
get f(){
return this.myForm.controls;
}
/**
* Write code on Method
*
* @return response()
*/
onFileChange(event:any) {
if (event.target.files && event.target.files[0]) {
var filesAmount = event.target.files.length;
for (let i = 0; i < filesAmount; i++) {
var reader = new FileReader();
reader.onload = (event:any) => {
console.log(event.target.result);
this.images.push(event.target.result);
this.myForm.patchValue({
fileSource: this.images
});
}
reader.readAsDataURL(event.target.files[i]);
}
}
}
/**
* Write code on Method
*
* @return response()
*/
submit(){
console.log(this.myForm.value);
this.http.post('http://localhost:8001/upload.php', this.myForm.value)
.subscribe(res => {
console.log(res);
alert('Uploaded Successfully.');
})
}
}
Шаг 5 - Создайте файл Upload.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");
$folderPath = "upload/";
$postdata = file_get_contents("php://input");
$request = json_decode($postdata);
foreach ($request->fileSource as $key => $value) {
$image_parts = explode(";base64,", $value);
$image_type_aux = explode("image/", $image_parts[0]);
$image_type = $image_type_aux[1];
$image_base64 = base64_decode($image_parts[1]);
$file = $folderPath . uniqid() . '.'.$image_type;
file_put_contents($file, $image_base64);
}
Обратите внимание, что код файла upload.php поможет вам загружать изображения на сервер из приложений angular.
Шаг 6 - Запустите приложение Angular и PHP-сервер
Выполните следующие команды в терминале, чтобы запустить приложение angular, а также сервер php:
ng serve
php -S localhost:8001
Затем откройте веб-браузер, введите в нем следующий URL:
http://localhost:4200
Вывод
В этом руководстве вы узнали, как загружать несколько изображений с предварительным просмотром в приложениях angular 14, используя службы веб-API в приложениях angular 14, чтобы загружать несколько изображений в каталог сервера.
импортировать {NgModule} из '@angular/core';
импортировать {BrowserModule} из '@angular/platform-browser';
импортировать {AppComponent} из './app.component';
импортировать {FormsModule, ReactiveFormsModule} из '@angular/forms';
импортировать {HttpClientModule} из '@angular/common/http';
@NgModule({
декларации: [
AppComponent
],
импорт: [
БраузерМодуль,
форммодуль,
РеактивФормсМодуле,
HttpClientModule
],
провайдеры: [],
начальная загрузка: [AppComponent]
})
экспортировать класс AppModule { }
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.