使用 Angular 6 php mysql 上传和检索图像

Question

我想通过 php 使用 angular 6 将图像上传到 mysql。之后，我想从数据库中检索图像以将其显示在 html 中。这是我的代码：

export class Student {

      idCard : string;

      fname : string;

      mname : string;

      lname : string;

      gender : string;

      studentPhoto?: File; //what type of data should I use

}

用于显示照片 student-details.component.html

<div class="col-xs-4">

  <img class="imageClass" src="student.studentPhoto" alt="Image not Recognized"/>

</div>

<!-- how can I set the src attribute -->

那么，我应该在角度和 MYSQL 中使用什么数据类型来存储图像？以及如何通过从 MYSQL 获取图像来显示图像？

Answer 1

这是解决问题的完整实现：在组件类中：import { StudentService } from '../student-service.service';import { DomSanitizer } from '@angular/platform-browser';export class StudentRegistrationComponent implements OnInit {&nbsp;imageUrl = null;&nbsp;photo: Blob;constructor(private _service: StudentService,&nbsp; &nbsp; &nbsp;public _DomSanitizationService: DomSanitizer) { }setPhoto(event){&nbsp; &nbsp; this.photo = event.target.files[0];&nbsp; }onClickSubmit(){&nbsp; &nbsp; &nbsp; const fd = new FormData();&nbsp; &nbsp; &nbsp; fd.append('stphoto',this.photo);&nbsp; &nbsp; &nbsp; this._service.postImage(fd).subscribe(res => console.log(res));&nbsp; }showImage(){&nbsp; &nbsp; this._service.getImage().subscribe((res) => {&nbsp;&nbsp; &nbsp; &nbsp; this.photo = res;&nbsp; &nbsp; &nbsp; var myReader:FileReader = new FileReader();&nbsp; &nbsp; &nbsp; myReader.onloadend = (e) => {&nbsp; &nbsp; &nbsp; &nbsp; this.imageUrl = this._DomSanitizationService.bypassSecurityTrustUrl(<string>myReader.result);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; myReader.readAsDataURL(this.photo);&nbsp; &nbsp;&nbsp; &nbsp; });&nbsp; }&nbsp; &nbsp;&nbsp;}在模板中：<input id="photo" name="studentPhoto" type="file" (change)="setPhoto($event)" class="form-control"><button class="btn btn-primary" (click) = "onClickSubmit()">submit</button><button (click)="showImage()">showImage</button><img [src]="imageUrl" height="200" width="200" class="img-thumnail">学生服务：import { Injectable } from '@angular/core';import { Observable } from 'rxjs';import { HttpClient } from '@angular/common/http';@Injectable({&nbsp; providedIn: 'root'})export class StudentService {&nbsp; constructor(private httpClient: HttpClient) { }&nbsp; postImage(fd : FormData): Observable<string>{&nbsp; &nbsp; return this.httpClient.post<string>('http://localhost:4000/files/postImage.php', fd );&nbsp; }&nbsp; getImage(): Observable<Blob> {&nbsp; &nbsp; return this.httpClient.get( 'http://localhost:4000/files/getImage.php', { responseType: 'blob' })&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;}}postImage.php<?phpheader('Access-Control-Allow-Origin: *');header('Access-Control-Allow-Methods: GET, POST, DELETE, PUT');header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization');header('Access-Control-Allow-Credentials: true');$con = mysqli_connect("localhost:3306","root","","students");mysqli_set_charset($con, "utf8");if($_FILES["stphoto"])&nbsp;&nbsp;&nbsp;{&nbsp;&nbsp;&nbsp; &nbsp;$tmporary = $_FILES["stphoto"]["tmp_name"];&nbsp; &nbsp;$file_name = $_FILES["stphoto"]["name"];&nbsp; &nbsp; &nbsp; if(move_uploaded_file($tmporary,"C:\Users\ABDU\AppData\Local\_"."$file_name"))&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp;if($file = addslashes(file_get_contents("C:\Users\ABDU\AppData\Local\_"."$file_name")))&nbsp; &nbsp; &nbsp; &nbsp;{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $sql = "INSERT INTO imagedb (`imagefile`) VALUES ('$file')";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; mysqli_query($con,$sql);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; mysqli_query($con,"ALTER TABLE imagedb AUTO_INCREMENT = 1");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; echo json_encode("successfully injected");&nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp;else&nbsp; &nbsp; &nbsp; &nbsp; echo json_encode("error");&nbsp;}?>获取图像.php<?phpheader('Access-Control-Allow-Origin: *');header('Access-Control-Allow-Methods: GET, POST, DELETE, PUT');header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization');header('Access-Control-Allow-Credentials: true');$con = mysqli_connect("localhost:3306","root","","students");mysqli_set_charset($con, "utf8");$sql = "SELECT imagefile FROM imagedb";$result = mysqli_query($con,$sql))$row = mysqli_fetch_assoc($result);echo $row['imagefile'];?>imagedb表有两列：“ id ”和“ imagefile ”（类型 = LongBlob）