Загрузите файл через ajax POST-запрос с использованием PHP-приложения на основе Silex

Question

Отказ от ответственности: Я очень мало знаю о 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!'); 
    }); 
} 

Backend:

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

Проблема: Я ожидаю, чтобы иметь файл с именем «uploadedFile» в $request->files объекта, но либо нет ничего там , или я не знаю, как достичь загруженного файла, потому что контроллер считает, что $file == NULL истинно.

Как проверка работоспособности, я вернул $request->getContent() с контроллера и проверил результат в браузере. Вот что бэкенд получает:

Так что, похоже, как бэкенд получает содержимое формы с именем 'uploadedFile'. Итак, что я делаю неправильно на бэкэнде? Как я могу добраться до этого загруженного файла в контроллере Silex?

Это все так ужасно запутанно. Помоги пожалуйста!

Answer 1

Хорошо, оказывается, что это не было PHP вопрос, но вопрос JavaScript, после того, как все :-) Ошибка была вызвана неправильными заголовками в объекте конфигурации, что я проходил в fetch:

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

Когда я эту часть опустим, заголовки запросов являются:

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:false 

Так что, это была моя ошибка. Странно, потому что я отчетливо помню, что я видел рекомендацию установить заголовок типа контента в false при подготовке запроса ajax.