将图像文件从angular发送到php

Question

I'm trying to send image that choose from angular app to my php here is what i do.

 onSubmit(e) {
    e.preventDefault();
       this.submitted = true;
        if (this.profilForm.invalid) {
            return;
        }
                this.email  = this.profilForm.controls['email_txt'].value;

        this.fullname   = this.profilForm.controls['fullname_txt'].value;
        this.address    = this.profilForm.controls['address_txt'].value;
        this.telp       = this.profilForm.controls['telp_txt'].value;

        this.profilapi.updateProfil( this.fullname, this.address , this.telp , this.email, this.selectedFile ).subscribe((data:  Array<object>) => {
                this.userinfo  =  data;
                console.log( "blablabla - " + this.userinfo);
                this.alertService.danger("Something wrong please try again later");

       },
       error => {               
                console.log( "err - " + error );
                this.alertService.danger("Something error, please try again later");
            }
       );

  }

    onFileChanged(event) {
        this.selectedFile = event.target.files[0]
    }

my service

updateProfil(fullname,address,telp,email,profil){
        return  this.httpClient.post(
                `${this.API_URL}` , 
                {   
                    "fullname" : fullname, 
                    "address" : address , 
                    "telp" : telp , 
                    "email" : email , 
                    "profil" : profil
                } 
                );
    }

ini here is my php so far.

<?php

include_once("Crud.php");
$crud = new Crud();

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');

$postdata   = file_get_contents("php://input");
$request    = json_encode($postdata);
$email      = $request->email;
$fullname   = $request->fullname;
$address    = $request->address;
$phone      = $request->phone;
echo $email;
?>

how can i receive the image at my php and upload it to specified folder ? thanks in advance and sorry for my english.

Answer 1

This is how I upload files from Angular to PHP: (This is not the optimal solution but it works just fine)
1- Read the file from the input and put it in json object:

readFile(event){
        let reader = new FileReader();
        if(event.target.files && event.target.files.length > 0) {
            let file:File = event.target.files[0];
            reader.readAsDataURL(file);
                reader.onload = () => {
                    let fielToUpload = {
                        fileName: file.name,
                        fileType: file.type,
                        fileExtension: file.name.slice((fileName.lastIndexOf(".") - 1 >>> 0) + 2);,
                        value: reader.result.split(',')[1]
                    };
                    this.profilapi.updateProfil(fielToUpload).subscribe(res => // do whatever you want here);
                };
        }
    }

2- In your service

updateProfil(fielToUpload: any): Observable<any>{
        let _headers = new HttpHeaders({
            'Content-Type': 'application/json',
        });
        return this._http.post('path/to/your/api', fielToUpload, {headers: _headers})
    }

3- Read the object from your php file:

 $postdata   = file_get_contents("php://input");
    $data    = json_encode($postdata);
    $fileName = time().'.'.$data['fileExtension'];
    $path = '/path/to/upload/directory/'.$fileName;
    file_put_contents($path, base64_decode($data['value']));