[英]How to upload an Excel file (.xlxs) from Angular front end to Laravel API?
My process starts in this HTML form:我的流程从这个 HTML 表单开始:
<form [formGroup]="fileForm" enctype="multipart/form-data">
<input
type="file"
accept=".xlsx"
formControlName="file"
(change)="onFileChange($event.target.files)"
/>
</form>
When a file is selected, onFileChange()
is called, which does the following:当一个文件被选中时, onFileChange()
被调用,它执行以下操作:
public onFileChange(files: FileList): void {
if (files.length) {
this.file = files[0];
}
}
Once the file is set, the user clicks the upload button:设置文件后,用户单击上传按钮:
public onUploadClick(): void {
if (this.file) {
this.fileService.uploadFile(this.file).subscribe();
}
}
My fileService
then handles sending the http request to the API:然后我的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 });
}
Finally, the code in my FileController
:最后,我的FileController
的代码:
public function upload(Request $request)
{
dd($request->all()); // Shows as [ "formData" => [] ]
$file = $request->file('file');
dd($file); // Shows as null
}
Sorry for the wall of code, but wanted to give you a clear insight into how it currently works.对于代码墙很抱歉,但想让您清楚地了解它目前的工作方式。
From what I've found online, using FormData
is the right thing to do.从我在网上找到的内容来看,使用FormData
是正确的做法。 I'm pretty sure that part is working correctly, because if I do console.log(formData.get("file"));
我很确定那部分工作正常,因为如果我做console.log(formData.get("file"));
, it displays the file. ,它显示文件。
I've also seen a lot about the content-type header.我还看到了很多关于内容类型标题的内容。 I've tried setting this to undefined
, application/json
, and also application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
(this is the type of the file when it's logged in the console).我尝试将其设置为undefined
、 application/json
以及application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
(这是在控制台中登录时的文件类型)。
On the Laravel side of things, whichever way I try to print the file, it always comes through as []
or null
.在 Laravel 方面,无论我尝试以哪种方式打印文件,它总是以[]
或null
。
Also, there are no errors produced from either Angular or Laravel.此外,Angular 或 Laravel 都不会产生错误。
For some context, I'm trying to import the spreadsheet to then use Laravel Excel ( https://docs.laravel-excel.com/ ), so I can import the contents of the spreadsheet into a database (so please let me know if there's an easier way to get to that stage!)对于某些情况,我试图导入电子表格然后使用 Laravel Excel( https://docs.laravel-excel.com/ ),这样我就可以将电子表格的内容导入数据库(所以请告诉我如果有更简单的方法可以到达那个阶段!)
Thanks for any help谢谢你的帮助
In case anyone else runs into this issue, the problem wasn't with the code above.万一其他人遇到这个问题,问题不在于上面的代码。
Turns out it was an issue with my Nginx config file - I had to add原来这是我的 Nginx 配置文件的问题 - 我不得不添加
client_max_body_size 0;
to my sites-available config file.到我的站点可用配置文件。 This removed the default body size limits, which were causing any files larger than 1mb to not come through to the API.这删除了默认的正文大小限制,这会导致任何大于 1mb 的文件无法通过 API。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.