Question

我使用Angular 2和PHP将文件和数据上传到我的服务器时遇到了一些麻烦。

我已经跟着这个File Upload In Angular 2?从Angular 2上传了数据和文件，一切似乎都没问题（我可以通过打印php：//输入看到收到的数据）。我的Angular 2代码是这样的：

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超全局来解决它

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

但是我在这里因为$ _FILES ....

而无法做到这一点

我在这篇文章PHP - empty $_POST and $_FILES - when uploading larger files中看到问题可能是post_max_size或upload_max_filesize很小，但我将它们设置为100M（为了我的目的），并且仍然是相同的。我甚至没有看过memory_limit，而是一无所获。

我认为我的问题必须在我的服务器端，可能是我设置的标题或我错过的一些配置。我放弃了任何CodeIgniter问题（我使用的是CodeIgniter的最新版本），因为我试图发布到一个简单的php文件，我遇到了同样的问题。我使用的最简单的服务器端是：

<?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 post multipart / form-data请求使用边界随机字符串来标识客户端发送的不同参数，以便为服务器提供参考解析输入。有效的请求标头如下所示：

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

在我的实现中，将请求标头设置为：

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

没有设置边界，因此PHP无法将输入解析为populete $ _POST和$ _FILES。我试图通过附加在标题的末尾来定义我自己的边界，但它没有工作。但是......解决方案更加简单：无需指定Content-Type标头，Angular 2只需将数据作为FormData传递并执行post请求，创建PHP可以使用的有效边界。 / p>

因此，执行此操作的有效代码是：

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));
}

执行此发布请求时，Angular 2将在multipart / form-data标头中添加有效边界。

这就是全部。

如果有人可以添加更多关于此的技术细节，那就太棒了。

希望这可以帮助别人。

从Angular 2上传时，PHP不会填充$ _POST和$ _FILES

1 个答案: