角度文件上传到Laravel

Question

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

以下上传代码有效（我已经包含了用于bootstrap的JQuery库）：

$.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”那样做。使用import - 从'@ angular / common / http'导入{HttpClientModule，HttpClient，HttpHeaders};以下代码，服务器获取发布数据的空白条目。发布数据像常规表单一样出现在请求正文中，但是无法从$ _POST或laravel的$ request参数访问它。

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

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

Answer 1

您只需要为您的http服务设置正确的标头和formdata，请不要通过标头传递任何内容类型。我不知道你在做什么管道和所有这些，但这样的传递参数应该工作

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