Question

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

以下上传代码有效（我已将JQuery库包含在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
});

然而，它并不像＆＃34; Angular＆＃34;这样做的方式。使用导入 - 从＆＃39; @ angular / common / http＆＃39;中导入{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();

角度文件上传到Laravel

1 个答案: