Angular上传图片

前言

在本教程中,您将学习如何在 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 应用程序:

1
2
3

ng new my-new-app

第 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各种图片格式之间的转换