前言
在本教程中，您将学习如何在 angular 12/11 应用程序中制作带有预览功能的图像上传示例。
此外，本教程将逐步指导您如何在角度 11/12 中上传图像。并且还将反应式表单与表单组一起使用，以上传带有预览的图像。
反应式表单图像上传，可在 Angular 12/11 中预览
使用以下步骤在响应式 angular 11/12 应用程序中上传带有预览的图像：
第 1 步 – 创建新的 Angular 应用程序
第 2 步 – 导入模块
第 3 步 – 使用代码查看文件
第 4 步 – 使用组件 ts 文件
第 5 步 –创建Upload.php文件
第 6 步 - 启动Angular应用程序和PHP服务器
第 1 步 – 创建新的 Angular 应用程序
首先，打开您的终端并在其上执行以下命令以安装 angular 应用程序：
第 2 步 – 导入模块
然后，打开 app.module.ts 文件并将 HttpClientModule、FormsModule 和 ReactiveFormsModule 导入到 app.module.ts 文件中，如下所示：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule,
FormsModule,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
|
第 3 步 – 使用代码查看文件
在此步骤中，使用input file元素和图像标签创建简单的反应式表单。因此，请打开 src/app/app.component.html 并将以下代码更新到其中：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
| <h1>Angular 11 Image Upload with Preview - tutsmake.com</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.required">Name is required.</div>
<div *ngIf="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"
(change)="onFileChange($event)">
<div *ngIf="f.file.touched && f.file.invalid" class="alert alert-danger">
<div *ngIf="f.file.errors.required">File is required.</div>
</div>
</div>
<img [src]="imageSrc" *ngIf="imageSrc" style="height: 300px; width:500px">
<button class="btn btn-primary" type="submit">Submit</button>
</form>
|
第 4 步 – 修改app.component.ts文件
在此步骤中，访问 src/app 目录并打开 app.component.ts。然后在 component.ts 文件上添加以下代码，如 formGroup 和 formControl 元素：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
| 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 {
imageSrc: string;
myForm = new FormGroup({
name: new FormControl('', [Validators.required, Validators.minLength(3)]),
file: new FormControl('', [Validators.required]),
fileSource: new FormControl('', [Validators.required])
});
constructor(private http: HttpClient) { }
get f(){
return this.myForm.controls;
}
onFileChange(event) {
const reader = new FileReader();
if(event.target.files && event.target.files.length) {
const [file] = event.target.files;
reader.readAsDataURL(file);
reader.onload = () => {
this.imageSrc = reader.result as string;
this.myForm.patchValue({
fileSource: reader.result
});
};
}
}
submit(){
console.log(this.myForm.value);
this.http.post('http://localhost:8001/upload.php', this.myForm.value, httpOptions)
.subscribe(res => {
console.log(res);
alert('Uploaded Successfully.');
})
}
}
|
第 5 步 –创建Upload.php文件
在此步骤中，创建upload.php文件并将以下代码更新到其中：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<?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);
$image_parts = explode(";base64,", $request->fileSource);
$image_type_aux = explode("image/", $image_parts[0]);
$image_type = $image_type_aux[1];
$image_base64 = base64_decode($image_parts[1]);
$file = $folderPath . uniqid() . '.png';
file_put_contents($file, $image_base64);
?>
|
请注意，upload.php文件代码将帮助您从 angular 11 应用程序在服务器上上传图像。
第 6 步 - 启动Angular应用程序和PHP服务器
在此步骤中，在终端上执行以下命令以启动Angular应用程序和php服务器：
1
2
3
4
5
|
ng serve
php -S localhost:8001
|
参考文档
Image Upload With Preview in Angular 12/11
Angular 9/8 Image Upload and Cropper with Preview Example
ngx-image-cropper demo-app
Go Gin 实现文件的上传下载流读取
Go 如何利用multipart/form-data实现文件的上传与下载
Angular文件上传:完整指南
File、Blob、Base64各种图片格式之间的转换