Отправить файл изображения из углового в php

Я пытаюсь отправить изображение, которое выбирает из углового приложения на мой php, вот что я делаю.

 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]
    }

мой сервис

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

Ини здесь мой php до сих пор.

<?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;
?>

Как я могу получить изображение на моем php и загрузить его в указанную папку? заранее спасибо и извините за мой английский.

Источник

3 ответа

Решение

Вот как я загружаю файлы с Angular в PHP: (Это не оптимальное решение, но оно работает просто отлично)
1- Считайте файл из ввода и поместите его в объект json:

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- К вашим услугам

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- Считайте объект из вашего php-файла:

 $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']));
Источник

Вы пытаетесь получить данные файла через php://input но документация, предупреждающая нас, что этот способ недоступен для enctype="multipart/form-data" формы, так что вы должны использовать $_POST массив.

Также, если вы отправляете POST-запрос в PHP-скрипт, все загруженные файлы не помещаются в $_POST массив, они помещаются в $_FILES массив, а затем вы должны переместить их с собой:

$uploads_dir = '/uploads';
foreach ($_FILES["pictures"]["error"] as $key => $error) {
    if ($error == UPLOAD_ERR_OK) {
        $tmp_name = $_FILES["pictures"]["tmp_name"][$key];
        // basename() may prevent filesystem traversal attacks;
        // further validation/sanitation of the filename may be appropriate
        $name = basename($_FILES["pictures"]["name"][$key]);
        move_uploaded_file($tmp_name, "$uploads_dir/$name");
    }
}

Более подробная информация здесь: http://php.net/manual/en/features.file-upload.php

Источник

Если вы хотите отправить изображение или файл с данными, вы должны использовать объект FormaData, например:

public postFile(data: any) {
    const endpoint ='url'
    const formData: FormData = new FormData();
    formData.append('image', data.file, data.file.name);
    formData.append('type', data.type);
    formData.append('label', data.label);
    formData.append('profile', data.label);
    let headers = new HttpHeaders(); 
    headers = headers.set('Content-Type', 'multipart/form-data');
    headers = headers.set('Accept', 'application/json');
  
    return this._http
      .post(endpoint, formData, { headers: headers })
      
  }

Источник
Другие вопросы по тегам