如何从 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。