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

我正在使用Angular 2和ASP.NET核心Web API實施文件上傳以處理請求。使用Asp.Net Core Web API文件上傳文件始終爲空

我的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

我現在面臨的問題是，該文件是始終在控制器空。

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

在此先感謝。

來源

2017-05-21 Acjb

做你嘗試改變控制器的方法對公共異步任務上傳（ICollection的文件） – codeSetter

但我路過只有一個文件中的服務@Dipak – Acjb

我也懷疑你張貼集合作爲FORMDATA。所以轉到列表並放棄！ – codeSetter

你不需要用FORMDATA

使用 '的multipart/form-data的'

在角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方面

來源

2017-05-22 11:07:31 codeSetter

與dotnet的另一種方式核心，您可以使用IFromFile界面，並設置默認標題：

角2

let formData = new FormData(); 
formData.append("file", yourUploadFile); 

this.http.post("your_api_path", formData).subscribe(r => console.log(r));

DOTNET核心

[HttpPost] 
[Route("/your_api_path")] 
public async Task<IActionResult> Upload(IFromFile file) { 
    //...next awaiters...  
}

如果你想發送多個文件，你可以使用ICollection<IFormFile>作爲上傳PARAMS。

要發送多個屬性，您可以使用自定義模型對象，並且IFormFile將是其中一個屬性。

希望它有幫助！

來源

2017-11-24 18:56:49

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

回答

相關問題