首页 文章

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

提问于
浏览 次
0

我使用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));
}

问题是superglobals $ _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更高的东西 .

我认为我的问题必须在我的服务器端，可能是我设置的 Headers 或我错过的一些配置 . 我放弃了任何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));
?>

但我得到空阵列......

有没有人知道我该怎么办？

php angular file post

1 回答

  • 0

    我终于找到了解决这个问题的方法 .

    在非技术性的讲话中（我不是专家），htpp post multipart / form-data请求使用边界随机字符串来标识客户端发送的不同参数，以便为服务器提供解析输入的引用 . 有效的请求标头如下所示：

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

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

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

    没有设置边界，所以PHP无法解析populete $ _POST和$ _FILES的输入 . 我试图通过附加在 Headers 的末尾来定义我自己的边界，但它不起作用 . 但是......解决方案更加简单：不需要指定Content-Type标头，Angular 2只会通过将数据作为FormData传递并执行post请求来创建它，从而创建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));
}

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

    就这样 .

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

    希望这可以帮助别人 .

    回复于

相关问题