在后端使用基于 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 的建议。
免责声明:我对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 的建议。