Anguar 2에서 업로드 할 때 PHP가 $ _POST 및 $ _FILES을 채우지 않습니다.

Question

Angular 2 및 PHP를 사용하여 서버에 파일 및 데이터를 업로드하는 데 문제가 있습니다.

나는 데이터를 업로드하기 위해이 File Upload In Angular 2?을 따라 갔고 모든 것은 괜찮았다 (나는 php : // 인풋을 인쇄하여받은 데이터를 볼 수있다).

upload(data: data, file: File): Observable<any> { 
    let header = new Headers(); 
    header.append('Content-Type', 'multipart/form-data'); 
    header.append('Accept', 'application/json'); 
    let options = new RequestOptions({ headers: header }); 

    let formData:FormData = new FormData(); 
    formData.append('file', file, file.name) 
    formData.append('data', JSON.stringify({data})); 

    return this.http 
    .post('myurl', formData, options) 
    .map(response => { 
     return response; 
    }) 
    .catch(error => Observable.throw(error.message || error)); 
} 

문제는 자동 전역 $ _POST와 $ _FILES가 채워지지 않습니다 것을, 그래서 나는 그들에 액세스 할 수 없습니다 (데이터 및 파일이 너무 업로드) : 내 각도이 코드는 다음과 같은 것입니다. .... 단지 데이터를 업로드 할 때 저도 같은 문제를 가지고 나는

$_POST = file_get_contents("php://input"); 

를 수행하여 $ _POST 자동 전역을 수동으로 채우는하지만 여기에 내가 때문에 $ _FILES의이 작업을 수행 할 수 없습니다 해결

나는이 게시물 PHP - empty $_POST and $_FILES - when uploading larger files에서 post_max_size 또는 upload_max_filesize가 작을 수 있지만 100M (내 용도로는 충분 함)으로 설정하고 여전히 동일하게 설정할 수 있음을 확인했습니다. 심지어 나는 memory_limit을 더 많이 보았지만 아무것도하지 않았다.

내 문제는 내 서버쪽에 있어야한다고 생각합니다. 설정 한 헤더 나 놓친 구성이 될 수 있습니다. 나는 간단한 PHP 파일에 게시하려고했기 때문에 어떤 CodeIgniter 문제 (CodeIgniter의 마지막 버전을 사용하고있다)를 버렸고 같은 문제가 발생했다. 내가 사용하고있어 간단한 서버 측은 다음과 같습니다

<?php 
    header('Content-Type: application/json'); 
    header('Access-Control-Allow-Origin: *'); 
    header('Access-Control-Allow-Methods: GET, POST'); 
    header('Access-Control-Allow-Headers: Content-Type'); 

    exit(var_dump($_POST, $_FILES)); 
?> 

하지만 빈 배열을 얻을 ...

아무도 내가 무엇을 할 수 있는지 어떤 생각을 가지고 있습니까?

Answer 1

나는이 문제에 대한 해결책을 마침내 발견했다.

비 기술적 인 말로하면 (필자는 전문가가 아닙니다.) htpp 게시물 다중 파트/양식 데이터 요청은 경계 임의 문자열을 사용하여 서버가 서버에 대한 참조를 제공하기 위해 클라이언트가 보낸 여러 매개 변수를 식별합니다. 입력을 파싱합니다. 로 요청 헤더를 설정할 때

내 implementatation에서

Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryYnNrniY34QSJ48LC 

, :

이

header.append('Content-Type', 'multipart/form-data'); 

PHP가 입력을 구문 분석 할 수 있도록 설정되어 더 경계 $ _POST를 populete하지하고 유효한 요청 헤더는 다음과 같습니다 $ _FILES. 난 헤더의 끝에 추가하여 내 자신의 경계를 정의하려고했지만 작동하지 않았다. 그러나 ... 솔루션은 더 쉽습니다. Content-Type 헤더를 지정할 필요가 없습니다. Angular 2는 FormData로 데이터를 전달하고 게시 요청을 수행하여 PHP가 사용할 수있는 유효한 경계를 작성함으로써이를 만듭니다.

그래서,이 작업을 수행하는 유효한 코드는 다음과 같습니다

upload(data: data, file: File): Observable<any> { 
    let formData:FormData = new FormData(); 
    formData.append('file', file, file.name) 
    formData.append('data', JSON.stringify({data})); 

    return this.http 
    .post('myurl', formData) 
    .map(response => { 
     return response; 
    }) 
    .catch(error => Observable.throw(error.message || error)); 
} 

이 게시물 요청을 수행 각도 2는 다중/폼 데이터 헤더에 유효한 경계를 추가합니다.

그게 전부입니다.

누군가가 이에 대한 기술적 세부 사항을 추가 할 수 있다면 좋을 것입니다.

다른 사람에게 도움이되기를 바랍니다.