如何從 Angular 前端上傳 Excel 文件 (.xlxs) 到 Laravel API？

Question

我的流程從這個 HTML 表單開始：

<form [formGroup]="fileForm" enctype="multipart/form-data">
  <input
    type="file"
    accept=".xlsx"
    formControlName="file"
    (change)="onFileChange($event.target.files)"
  />
</form>

當一個文件被選中時， onFileChange()被調用，它執行以下操作：

public onFileChange(files: FileList): void {
  if (files.length) {
    this.file = files[0];
  }
}

設置文件后，用戶單擊上傳按鈕：

public onUploadClick(): void {
  if (this.file) {
    this.fileService.uploadFile(this.file).subscribe();
  }
}

然后我的fileService處理向 API 發送 http 請求：

public uploadFile(file: File): Observable<APIResponse> {
  const url = `${environment.apiURL}/api/other/upload`;

  const formData = new FormData();
  formData.append("file", file, file.name);

  return this.http.post<APIResponse>(url, { formData });
}

最后，我的FileController的代碼：

public function upload(Request $request)
{
    dd($request->all()); // Shows as [ "formData" => [] ]

    $file = $request->file('file');
    dd($file); // Shows as null
}

對於代碼牆很抱歉，但想讓您清楚地了解它目前的工作方式。

從我在網上找到的內容來看，使用FormData是正確的做法。 我很確定那部分工作正常，因為如果我做console.log(formData.get("file")); ，它顯示文件。

我還看到了很多關於內容類型標題的內容。 我嘗試將其設置為undefined 、 application/json以及application/vnd.openxmlformats-officedocument.spreadsheetml.sheet （這是在控制台中登錄時的文件類型）。

在 Laravel 方面，無論我嘗試以哪種方式打印文件，它總是以[]或null 。

此外，Angular 或 Laravel 都不會產生錯誤。

對於某些情況，我試圖導入電子表格然后使用 Laravel Excel（ https://docs.laravel-excel.com/ ），這樣我就可以將電子表格的內容導入數據庫（所以請告訴我如果有更簡單的方法可以到達那個階段！）

謝謝你的幫助

Answer 1

萬一其他人遇到這個問題，問題不在於上面的代碼。

原來這是我的 Nginx 配置文件的問題 - 我不得不添加

client_max_body_size 0;

到我的站點可用配置文件。 這刪除了默認的正文大小限制，這會導致任何大於 1mb 的文件無法通過 API。