我想通過 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 獲取圖像來顯示圖像？
1 回答
犯罪嫌疑人X
TA貢獻2080條經驗 獲得超4個贊
這是解決問題的完整實現：
在組件類中：
import { StudentService } from '../student-service.service';
import { DomSanitizer } from '@angular/platform-browser';
export class StudentRegistrationComponent implements OnInit {
imageUrl = null;
photo: Blob;
constructor(private _service: StudentService,
public _DomSanitizationService: DomSanitizer) { }
setPhoto(event){
this.photo = event.target.files[0];
}
onClickSubmit(){
const fd = new FormData();
fd.append('stphoto',this.photo);
this._service.postImage(fd).subscribe(res => console.log(res));
}
showImage(){
this._service.getImage().subscribe((res) => {
this.photo = res;
var myReader:FileReader = new FileReader();
myReader.onloadend = (e) => {
this.imageUrl = this._DomSanitizationService.bypassSecurityTrustUrl(<string>myReader.result);
}
myReader.readAsDataURL(this.photo);
});
}
}
在模板中：
<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({
providedIn: 'root'
})
export class StudentService {
constructor(private httpClient: HttpClient) { }
postImage(fd : FormData): Observable<string>{
return this.httpClient.post<string>('http://localhost:4000/files/postImage.php', fd );
}
getImage(): Observable<Blob> {
return this.httpClient.get( 'http://localhost:4000/files/getImage.php', { responseType: 'blob' })
}
}
postImage.php
<?php
header('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"])
{
$tmporary = $_FILES["stphoto"]["tmp_name"];
$file_name = $_FILES["stphoto"]["name"];
if(move_uploaded_file($tmporary,"C:\Users\ABDU\AppData\Local\_"."$file_name"))
{
if($file = addslashes(file_get_contents("C:\Users\ABDU\AppData\Local\_"."$file_name")))
{
$sql = "INSERT INTO imagedb (`imagefile`) VALUES ('$file')";
mysqli_query($con,$sql);
mysqli_query($con,"ALTER TABLE imagedb AUTO_INCREMENT = 1");
echo json_encode("successfully injected");
}
}
else
echo json_encode("error");
}
?>
獲取圖像.php
<?php
header('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）
- 1 回答
- 0 關注
- 139 瀏覽
添加回答
舉報
0/150
提交
取消