在后端使用基于 Silex 的 PHP 应用程序通过 ajax POST 请求上传文件

Upload a file via an ajax POST request with a Silex-based PHP app on the backend

免责声明:我对PHP知之甚少;我最近才开始玩它。

背景: 我想在客户端使用 javascript 并在后端使用 PHP 上传文件。在后端,我正在试验 Silex PHP 微框架。

客户代码:

html

<form id="fileform">
  <input id="filefield" type="file" multiple="multiple" />
  <input type="submit" />
</form>

javascript

var form = document.querySelector('#fileform');
var fileField = document.querySelector('#filefield');
form.addEventListener('submit', formSubmit, false);


function formSubmit(e) {
  e.preventDefault();

  let formData = new FormData();
  let file = fileField.files[0];
  formData.append('uploadedFile', file);

  let config = {
    method: 'POST',
    mode: 'cors',
    cache: 'default',
    headers: {
      'Content-Type': false
    },
    body: formData
  };

  fetch('http://localhost:8000/uploads/test', config).then((response) => {
    console.log('submitted!');
  });
}

后端代码:

php(基于 Silex 的应用程序中的控制器)

use Symfony\Component\HttpFoundation\Request;

$uploads->post('/test', function (Request $request) use ($app) {

  $file = $request->files->get('uploadedFile');
  if ($file == NULL) {
    return 'null';
  } else {
    return 'not null';
  }
});

问题: 我希望在 $request->files 对象中有一个名为 'uploadedFile' 的文件,但是要么里面什么都没有,要么我不知道如何到达上传的文件,因为控制器认为 $file == NULL 是真的。

作为完整性检查,我从控制器返回 $request->getContent() 并在浏览器中检查结果。这是后端得到的:

所以看起来后端确实正在获取表单的内容,名称为 'uploadedFile'。那么我在后端做错了什么?我怎样才能在 Silex 控制器中找到这个上传的文件?

一切都非常混乱。请帮忙!

好吧,事实证明这不是一个 PHP 问题,而是一个 JavaScript 问题,毕竟 :-) 错误是由于配置中的 header 不正确造成的object 我要传递给 fetch:

headers: {
  'Content-Type': false
},

当我省略这部分时,请求header是:

Accept:*/*
Accept-Encoding:gzip, deflate, br
Accept-Language:en-US,en;q=0.8,ru;q=0.6
Cache-Control:no-cache
Connection:keep-alive
Content-Length:363123
content-type:multipart/form-data; boundary=----WebKitFormBoundaryzUZXCxORC35rae15
Host:localhost:8000
Origin:null
Pragma:no-cache
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.59 Safari/537.36

但如果我包含它,我会搞砸 content-type header,字面意思是:

content-type:false

是的,那是我的错误。很奇怪,因为我清楚地记得我在某处准备 ajax 请求时看到将 content-type header 设置为 false 的建议。