使用 Asp.Net Core Web API 文件上傳文件始終為空

我正在使用帶有 ASP.NET 核心 Web API 的 Angular 2 來實現文件上傳來處理請求。

我的 html 程式碼如下所示：

<input #fileInput type="file"/>
<button (click)="addFile()">Add</button>

和 angular2 程式碼

addFile(): void {
   let fi = this.fileInput.nativeElement;
   if (fi.files && fi.files[0]) {
       let fileToUpload = fi.files[0];
       this.documentService
           .uploadFile(fileToUpload)
           .subscribe(res => {
               console.log(res);
       });
   }
}

服務看起來像

public uploadFile(file: any): Observable<any> {
   let input = new FormData();
   input.append("file", file, file.name);
   let headers = new Headers();
   headers.append('Content-Type', 'multipart/form-data');
   let options = new RequestOptions({ headers: headers });
   return this.http.post(`/api/document/Upload`, input, options);
}

和控制器程式碼

[HttpPost]
public async Task Upload(IFormFile file)
{
   if (file == null) throw new Exception("File is null");
   if (file.Length == 0) throw new Exception("File is empty");

   using (Stream stream = file.OpenReadStream())
   {
       using (var binaryReader = new BinaryReader(stream))
       {
           var fileContent = binaryReader.ReadBytes((int)file.Length);
           //await this.UploadFile(file.ContentDisposition);
       }
   }
}

我的 RequestHeader 看起來像

POST /shell/api/document/Upload HTTP/1.1
Host: localhost:10050
Connection: keep-alive
Content-Length: 2
Authorization: Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJDb3JyZWxhdGlvbklkIjoiZDZlNzE0OTUtZTM2MS00YTkxLWExNWUtNTc5ODY5NjhjNDkxIiwiVXNlcklkIjoiMSIsIlVzZXJOYW1lIjoiWjk5OTkiLCJXb3Jrc3BhY2UiOiJRc3lzVFRAU09BVEVNUCIsIk1hbmRhbnRJZCI6IjUwMDEiLCJDb3N0Q2VudGVySWQiOiIxMDAxIiwiTGFuZ3VhZ2VDb2RlIjoiMSIsIkxhbmd1YWdlU3RyaW5nIjoiZGUtREUiLCJTdGF0aW9uSWQiOiI1NTAwMSIsIk5hbWUiOiJJQlMtU0VSVklDRSIsImlzcyI6InNlbGYiLCJhdWQiOiJodHRwOi8vd3d3LmV4YW1wbGUuY29tIiwiZXhwIjoxNDk1Mzc4Nzg4LCJuYmYiOjE0OTUzNzUxODh9.5ZP7YkEJ2GcWX9ce-kLaWJ79P4d2iCgePKLqMaCe-4A
Origin: http://localhost:10050
User-Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36
Content-Type: multipart/form-data
Accept: application/json, text/plain, */*
Referer: http://localhost:10050/fmea/1064001/content
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.8

我面臨的問題是控制器中的文件始終為空。

請有人幫我解決這個問題。

提前致謝。

您不需要將“multipart/form-data”與 FormData 一起使用

在 Angular 2 組件中：

<input type="file" class="form-control" name="documents" (change)="onFileChange($event)" />

onFileChange(event: any) {
   let fi = event.srcElement;
   if (fi.files && fi.files[0]) {
       let fileToUpload = fi.files[0];

       let formData:FormData = new FormData();
        formData.append(fileToUpload.name, fileToUpload);

       let headers = new Headers();
       headers.append('Accept', 'application/json');
       // DON'T SET THE Content-Type to multipart/form-data, You'll get the Missing content-type boundary error
       let options = new RequestOptions({ headers: headers });

       this.http.post(this.baseUrl + "upload/", formData, options)
                .subscribe(r => console.log(r));
   }
}

在 API 方面

[HttpPost("upload")]
public async Task<IActionResult> Upload()
{
   var files = Request.Form.Files;

   foreach (var file in files)
   {
      // to do save
   }

   return Ok();
}

引用自：https://stackoverflow.com/questions/44097604