Как отправить данные из формы Angular2 (вместе с изображением) в PHP, используя метод formdata?

Форма имеет текстовый ввод и файл-ввод. Я изучал учебник из Вот.

Это мое add.component.ts файл:-

import { AdminPage } from '../../../_models/admin.page.model';
import { AdminPageService } from '../../../_admin_service/admin.page';
import { ImageUploadService } from '../../../_common_service/image.upload';


export class AddComponent implements OnInit, AfterViewInit {
.............
.............

adminPageModel = new AdminPage('', '', '', '','');

constructor(private route: ActivatedRoute,
private router: Router,
private _adminPage: AdminPageService,
private _imageUpload: ImageUploadService,
fb: FormBuilder,
private _flashMessagesService: FlashMessagesService) {
this.addPageFormGroup = fb.group({
'title' : [null, Validators.compose([Validators.required])],
'meta_keyword': [null, Validators.required],
'meta_description': [null, Validators.required],
'image':[],
'desc': [null, Validators.required]
});
}


formImageUpload(event){
this._imageUpload.onFileChange(event,this.addPageFormGroup);
}

submitAddPage(value:any){
this.addPageFormGroup.get('desc').setValue($('.Editor-editor').html());
const adminPageModule = this._imageUpload.prepareSave(this.addPageFormGroup);
this._adminPage.postAdminPageAdd(adminPageModule).subscribe(
data => {
this.responseStatus = data;
if(this.responseStatus.status == 1)
{
this._flashMessagesService.show(this.responseStatus.message, { cssClass: 'alert-success', timeout: 2000 });
}
else
{
this._flashMessagesService.show(this.responseStatus.message, { cssClass: 'alert-danger', timeout: 2000 });
}
},
err => {
console.log(err)
},
() => {}
);
this.status = true;
}
}

Это image.upload.ts Сервисный файл, в котором мы устанавливаем данные формы из формы: —

@Injectable()
export class ImageUploadService {
constructor() {}

onFileChange(event, formHasImage:any) {
if(event.target.files.length > 0) {
let file = event.target.files[0];
formHasImage.get('image').setValue(file);
}
}

prepareSave(formHasImage): any {
let input = new FormData();
input.append('image', formHasImage.get('image').value);
input.append('title', formHasImage.get('title').value);
input.append('desc', formHasImage.get('desc').value);
input.append('meta_keyword', formHasImage.get('meta_keyword').value);
input.append('meta_description', formHasImage.get('meta_description').value);
console.log(input);
return input;
}
}

Это admin.page.ts служебный файл, где мы используем API. Это сделано путем ссылки на этот ответ Вот.

@Injectable()
export class AdminPageService {
http : Http;
actionUrl : string;
admin_page_add_url: string;
postAdminPageAddData: AdminPage;
adminPageAddResponse:Object= [];


constructor(public _http: Http) {
this.http = _http;
this.admin_page_add_url = 'http://localhost/angproject/phpscript/adminpage2.php';
}

// The form Data is being sent as parameter
postAdminPageAdd(postAdminPageAddFormData: any) {
let headers = new Headers();
headers.append('enctype', 'multipart/form-data');
headers.append('Accept', 'application/json');
this.actionUrl = this.admin_page_add_url;
return this.http.post(this.actionUrl,
{ postAdminPageAddFormData },
{ headers: headers })
.map(res => res.json()).share();
}
}

Это php-файл на стороне сервера, куда мы отправляем данные. Это сделано на принятом ответе Вот: —

<?php
error_reporting(E_ALL);
header("Access-Control-Allow-Origin: http://localhost:4200");
header("Access-Control-Allow-Headers: Content-Type, enctype");
header("Access-Control-Allow-Methods: POST, GET, OPTIONS");
header('Content-Type: application/json; charset=utf-8');
header('enctype: multipart/form-data');

include('connection.php');
$error = array();

if(isset($_FILES['image']))
{
$image = 'Image Exists';
}
else
{
$error[] = "Image was not entered";
$image = '';
}

if(isset($_POST['title']) && !empty($_POST['title']))
$title = $_POST['title'];
else
$error[] = "Title was not entered";


if(empty($error))
{
$response['status'] = 1;
$response['message'] = $image;
$response['error'] = $conn->error;
}
else
{
$response['status'] = 0;
$response['message'] = "Parameter missing";
$response['error'] = $error;
}
$respond = json_encode($response);
echo $respond;
exit;
?>

Моя проблема в том, что я всегда получаю ответ JSON:

{
"status": 0,
"message": "Parameter missing",
"error": [
"Image was not entered",
"Title was not entered"]
}

Похоже, что данные форм не отправляются на конец сервера. Что я здесь не так делаю? Имейте в виду, у меня есть другой процесс, чтобы отправить форму. Но в этом случае я могу успешно отправлять данные на сервер, не используя formdata, и, следовательно, я не могу реализовать загрузку файлов в этом методе.

Примечание: когда я делаю console.log(input)Я получаю это: —

введите описание изображения здесь

0

Решение

У вас есть две проблемы с методом postAdminPageAdd вашего AdminPageService.
Во-первых, Headers.append () не изменяет объект Headers, он возвращает новый объект Headers с оригинальными и новыми заголовками. Так что вам нужно сделать что-то вроде:

let headers = new Headers();
headers = headers.append('enctype', 'multipart/form-data');
headers = headers.append('Accept', 'application/json');

Во-вторых, объект FormData в посте не должен быть заключен в фигурные скобки — он должен работать, если вы делаете:

return this.http.post(
this.actionUrl,
postAdminPageAddFormData,
{ headers: headers }
).map(res => res.json()).share();
1

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

Попробуйте добавить файл непосредственно к объекту FormData.

@Injectable()
export class ImageUploadService {
file: File;
constructor() {}

onFileChange(event, formHasImage:any) {
if(event.target.files.length > 0) {
file = event.target.files[0];
}
}

prepareSave(formHasImage): any {
let input = new FormData();
input.append('image', this.file);
input.append('title', formHasImage.get('title').value);
input.append('desc', formHasImage.get('desc').value);
input.append('meta_keyword', formHasImage.get('meta_keyword').value);
input.append('meta_description', formHasImage.get('meta_description').value);
console.log(input);
return input;
}
}
0

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