.net核心2.2& Angular 7:文件上传控制器中的IFormFile始终为null [英] .net core 2.2 & Angular 7: IFormFile in file upload controller is always null

问题描述

在查看其他答案和某些Google时，一切似乎都很好，但是我的控制器从未收到任何数据.

When looking at other answers and some google, everything seems to be fine, yet my controller never receives any data.

Api uris等是正确的，请求到达了正确的控制器

Api uris and such are correct, the request arrives at the correct controller

角度片段:

component.html-我的输入字段

component.html - my input field

<div class="input-group">
    <input type="file" #fileInput id="fileInput" (change)="stageFile()"
           accept="csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">
    <div class="input-group-append">
        <button class="btn btn-primary" type="button" (click)="fileUpload()" [disabled]="!staged || uploading">
          <span *ngIf="!uploading,else loadAnim">Upload</span>
          <ng-template #loadAnim>Uploading...</ng-template>
        </button>
    </div>
</div>

component.ts-从视图获取数据

component.ts - get data from view

@ViewChild('fileInput') fileInput;
private file: File;
public uploading = false;
public staged = false;

constructor(private uploadService: UploadService) { }

public stageFile(): void {
    this.staged = true;
    this.file = this.fileInput.nativeElement.files[0];
    console.log(this.file)
}

public fileUpload():void {
    this.uploading = true;
    if (this.file != null)
      this.uploadService.upload(this.file).subscribe();
    this.staged = false;
    this.uploading = false;
}

services.ts-处理实际的ajax调用

services.ts - handle actual ajax call

private uploadURI = environment.dataServiceURI + '/upload';

constructor(private http: HttpClient) {}

public upload(file: File): Observable<object> {
// create multipart form for file
let formData: FormData = new FormData();
formData.append('file', file, file.name);

const headers = new HttpHeaders().append('Content-Type', 'mulipart/form-data');

// POST
return this.http
  .post(this.uploadURI, formData, {headers: headers})
  .pipe(map(response => response));
}

.net核心代码段

在这里IFormFile文件始终包含null，因此我的结果始终为500

It is here where IFormFile file always contains null and thus my result is always 500

[HttpPost("upload")]
[ProducesResponseType(StatusCodes.Status200OK)]
[ProducesResponseType(StatusCodes.Status500InternalServerError)]
public IActionResult ParseData([FromForm(Name = "file")] IFormFile file)
{
    if (file == null)
       return StatusCode(500);
    (...)
    return Ok()
 }

请求有效载荷信息

通过浏览器网络

------WebKitFormBoundarycBigaNKzS4qNcTBg 
Content-Disposition: form-data; name="file"; filename="test_data_schema.xlsx" 
Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet

------WebKitFormBoundarycBigaNKzS4qNcTBg--

推荐答案

问题已解决:

在 service.ts 中应该是

const headers = new HttpHeaders().append(' Content-Disposition '，'multipart/form-data');

const headers = new HttpHeaders().append('Content-Disposition', 'multipart/form-data');

代替

const headers = new HttpHeaders().append(' Content-Type '，'multipart/form-data');

const headers = new HttpHeaders().append('Content-Type', 'multipart/form-data');

也在 .net控制器中，添加或删除作为参数前缀的 [FromForm(Name ="file")] 不会改变行为.无论有没有它，它都能完美地工作.正如hugo在评论中指出的那样，只要参数名称与表单数据中的名称匹配，它就是基于约定的.

Also in the .net controller, adding or removing [FromForm(Name = "file")] as parameter prefix does not change the behavior. It works perfectly fine with or without it. As hugo pointed out in the comments it's convention based as long as the param name matches to name in the form data.

这篇关于.net核心2.2& Angular 7:文件上传控制器中的IFormFile始终为null的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！