如何使用 formdata 方法将数据从 Angular2 表单（连同图像）提交到 PHP？

Question

表单有文本输入和文件输入。我学习了 here.

的教程

这是我的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;
    }
}

这是我们点击 API 的 admin.page.ts 服务文件。这是参考这个回答.

做的

@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) 时，我得到这个：-

Answer 1

您的 AdminPageService 的 postAdminPageAdd 方法有两个问题。首先，Headers.append() 不会改变 Headers object，它 returns 一个新的 Headers object 和原来的 headers和新的。所以你需要做类似的事情：

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

其次，post 中的 FormData object 不应该用大括号括起来 - 如果这样做应该可以工作：

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

Answer 2

尝试将文件直接附加到 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;
    }
}

如何使用 formdata 方法将数据从 Angular2 表单（连同图像）提交到 PHP？

How to submit data from an Angular2 form (along with image) to PHP using formdata method?

php

angular2-forms

angular