Unggah Gambar Dalam Sudut Dengan PHP. Cara Mengunggah File Dalam Sudut.

Dalam posting ini, kita akan belajar cara mengunggah file dan menyimpannya sebagai Base64 ke dalam folder menggunakan PHP API. Untuk mengubah gambar menjadi Base64 kita akan menggunakan Angular dan Untuk API kita akan menggunakan PHP.

Ada banyak cara untuk mengunggah gambar di Angular tetapi dalam posting ini kami akan mengunggah dan mengonversi file di Base64 dan kemudian menyimpannya ke dalam folder menggunakan PHP.

Di bawah ini adalah langkah-langkah untuk mengunggah gambar di Angular dan layanan web di PHP. Jadi mari ikuti langkah-langkah berikut untuk melakukannya.

Langkah 1 Buat Proyek Sudut.

Buat aplikasi sudut menggunakan perintah di bawah ini.

ng new imageupload
Langkah 2 Impor Modul.

Pada langkah ini kita perlu mengimpor HttpClientModule ke app.module.ts. Jadi buka file app.module.ts dan impor.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
   
import { AppComponent } from './app.component';
   
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Langkah 3 Perbarui File Komponen.

Tambahkan kode di bawah ini di file app.component.ts.

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http'; 

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  imageSrc:any = '';
  status:boolean = false

  constructor(private http: HttpClient) { }

  ngOnInit(): void { }

  onFileChange(event:any) {
    this.status = false
    const file = event.target.files[0];
    this.status = event.target.files.length>0?true:false
    if(this.status==true){
       const reader = new FileReader();
       reader.readAsDataURL(file);
       reader.onload = () => {
          this.imageSrc = reader.result;          
       }
    }

  }

  submit(){

    this.http.post('http://localhost/phpapi/imageupload.php', {'image':this.imageSrc})
      .subscribe(res => {
        console.log(res);
        alert('Uploaded Successfully.');
      })
  }

}

Langkah 4 Perbarui File HTML.

Tambahkan kode di bawah ini di file app.component.html.

<h6 class="text-primary" align="center">Image Upload With Angular And PHP</h6>
    <label for="file">Select Image</label>
      <input  (change)="onFileChange($event)"  id="file" type="file">         
  <button [disabled]="!status"class="btn btn-primary" type="submit" (click)="submit()">Upload</button>

Langkah 5: Buat API di PHP.

Tambahkan kode di bawah ini imageupload.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");	 
    if(!empty($postdata)){
    $request = json_decode($postdata);
    $image_parts = explode(";base64,", $request->image);      
    $image_type_aux = explode("image/", $image_parts[0]); 
    $image_base64 = base64_decode($image_parts[1]);      
    $file = $folderPath . uniqid() . '.png';      
    if(file_put_contents($file, $image_base64)){	
	$response[] = array('sts'=>true,'msg'=>'Successfully uploaded');
    }      
     echo json_encode($response);
   }
?>

Sekarang API dan UI kami sudah siap, jadi jalankan kedua aplikasi dan periksa.

Validasi Formulir Reaktif Dalam Angular. Bentuk Multi Langkah Dalam Sudut.