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

Question

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

Я пытаюсь отправить изображение, которое выбирает из углового приложения на мой 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 и загрузить его в указанную папку? заранее спасибо и извините за мой английский.

1

angular angular6 php

Решение

Другие решения

Вы пытаетесь получить данные файла через 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

1

Если вы хотите отправить изображение или файл с данными, вы должны использовать Объект 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 })

}

0

Источник

По вопросам рекламы ammmcru@yandex.ru

Accepted Answer

Вот как я загружаю файлы с 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']));

0