角度文件上传到Laravel [英] Angular File Upload to Laravel

问题描述

我正在尝试使用Angular 5将文件上传到Laravel 5.5 API后端.

I am trying to upload a file to a Laravel 5.5 API backend using Angular 5.

以下上传代码有效(我已经包括用于引导的JQuery库):

The following upload code works (I have included JQuery library for use with bootstrap):

$.ajax({
    url: url,
    data: formModel,
    type: 'POST',
    contentType: false, // NEEDED, DON'T OMIT THIS
    processData: false, // NEEDED, DON'T OMIT THIS
    // ... Other options like success and etc
});

但是，这并不像"Angular"方法那样.使用导入-从'@ angular/common/http'导入{HttpClientModule，HttpClient，HttpHeaders};和下面的代码，服务器将为发布数据获取空白条目.帖子数据像常规格式一样出现在请求正文中，但是不能通过$ _POST或laravel的$ request参数访问.

However it does not feel like the "Angular" way to do this. Using imports -- import { HttpClientModule, HttpClient, HttpHeaders } from '@angular/common/http'; and the following code, the server gets blank entries for the post data. The post data is present in the request body like a regular form but it is not accessible from $_POST or laravel's $request parameter.

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/form-data' })
};
// In a real-world app you'd have a http request / service call here like
// this.http.post('apiUrl', formModel)
const url = this.configService.getAPIUrl() + 'videos'; //http://192.168.1.106/backend/hero';

let ret =  this.http.post(url, formModel, httpOptions).pipe(
  //tap((hero: T) => this.log(`posted {data}`)),
  catchError(this.heroService.handleError('addHero'))
).subscribe();

我只是想找出我的角度代码出了什么问题以及如何解决这个问题.感谢您的任何建议和回应.

I am just looking to find out what is wrong with my angular code and how I can fix that. Thanks for any suggestions and responses.

推荐答案

您只需要像这样为您的http服务设置适当的标头和formdata请不要通过标题传递任何内容类型.我不知道您在用管道做什么，除了传递这样的参数之外，其他都应该起作用

You just need to set proper headers and formdata to your http service like this Please do not pass any content-type via headers. I don't know what are you doing with pipe and all those but passing parameters like this should work

const url = this.configService.getAPIUrl() + 'videos'; 

let formModel = new FormData();
//Then add your data using formModel.append() method
//like formModel.append("username","ABC");

let ret =  this.http.post(url, formModel).pipe(
  //tap((hero: T) => this.log(`posted {data}`)),
  catchError(this.heroService.handleError('addHero'))
).subscribe();

这篇关于角度文件上传到Laravel的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！