无法将文件从 angular 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')，它们都返回null。

浏览器的开发者工具显示以下负载已提交：

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


------WebKitFormBoundaryqZauUjRcPnD6wRmx--

更新 控制器代码真的超级简单

 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 File Upload

在我的每一个测试中，文件数据本身都没有被传递到服务器。

任何帮助将不胜感激！

更新 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，试试看，如果不行请告诉我