Не могу загрузить файл с версии 5.2 в Laravel 5.5

Question

У меня странное поведение при попытке загрузить файл из Angular 5.2 в приложение Laravel 5.5. Данные файла не видны / недоступны на стороне сервера.

Я пробовал разные заголовки и подходы, но, похоже, все они терпят неудачу -

HTML:

<input type="file" (change)="handleFileInput($event.target.files)" multiple/>

JS:

handleFileInput(files: FileList) {
        let formData = new FormData();
        formData.append('file', files[0], files[0].name);

        let headers = new HttpHeaders({
            'Content-Type': 'application/json' // also tried 'multipart/form-data' and undefined
        });
        const req = new HttpRequest('POST', 'https://uploader.test/upload', formData, {headers: headers});
        this.http.request(req).subscribe(res => console.log(res)); 
    }

на стороне Laravel

logger('$request', [$request->all()]);

отпечатки []

Также пробовал $request->file('file') и Input::file('file'), которые оба возвращают ноль.

Инструменты разработчика браузера показывают, что отправлена ​​следующая полезная нагрузка:

------WebKitFormBoundaryqZauUjRcPnD6wRmx
Content-Disposition: form-data; name="file"; filename="31562207_10106275826879542_6883202223082307584_n.jpg"
Content-Type: image/jpeg


------WebKitFormBoundaryqZauUjRcPnD6wRmx--

UPDATE Код контроллера действительно очень простой

 public function upload(Request $request)
    {
        logger('$request->all()', [$request->all()]);    // prints $request->all() [[]] []
        logger('Input::all()', [Input::all()]);    // prints Input::all() [[]] []
        logger('input.file', [ Input::file('file') ]);    // prints input.file [null] []
        logger('request.file', [ $request->file('file')]);    // prints request.file [null] []
        logger('$_POST', [$_POST]);    // prints $_POST [[]] []
        logger('$_FILES', [$_FILES]);    // prints $_FILES [[]] []
}

Когда я заменяю formData объектом:

const req = new HttpRequest('POST', 'https://uploader.test/upload', {
            data: formData,
            file: files[0],
            test: '123'
        }, {headers: headers});
        this.http.request(req).subscribe(res => console.log(res));

Я получаю [{"data":[],"file":[],"test":"123"}]

Я также пробовал следующие обходные пути (найденные на разных форумах):

• Обход Laravel - formData.append('_method', 'PUT');
• с использованием http.post вместо http.request
• добавление опций с contentType: false и processData: false
• Уже опробованные решения, предложенные в других вопросах, таких как Загрузка файла Angular-5

В каждом из моих тестов сами данные файла не передаются на сервер.

Любая помощь будет принята с благодарностью!

ОБНОВЛЕНИЕ 2 - скриншот заголовка запроса

Answer 1

давайте попробуем это:

для обработки файлов js добавить это:

import {Injectable} from "@angular/core";
import {HttpClient} from "@angular/common/http";

@Injectable()
export class FileUploader{
  constructor(public http:HttpClient){}

  handleFileInput(files: any){
    let xhr = new XMLHttpRequest();
    let form = new FormData();
    let token = "YOUR_TOKEN";
    form.append('file', files[0], files[0].name);
    xhr.onload = (e) =>{
      console.log('file uploaded');
    };
    xhr.open('POST', "https://uploader.test/upload", true);
    xhr.withCredentials = true;
    xhr.setRequestHeader('Authorization', 'Bearer ' + token);
    xhr.send(form);
  }
}

Теперь для стороны Laravel добавить это:

public function saveFile(Request $request){
   $path = $request->file('file')->store('uploaded');
   return response()-json($path);
}

в коде js, который я использовал HttpClient, вы можете использовать XMLHttpRequest, попробуйте, если это не сработало, дайте мне знать