无法将文件从angular 5.2上传到Laravel 5.5

Question

当我试图将一个文件从Angular 5.2上传到Laravel5.5应用程序时，我遇到了一个奇怪的行为。文件数据在服务器端不可见/不可访问。

我试过不同的头和方法，但似乎都失败了-

HTML：

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

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

浏览器的开发人员工具显示提交了以下有效负载：

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

null

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