Angular2 zu Asp.net Core Webapi IFormFile ist null

Question

Ich benutze angular2 mit asp.net Core Webapi. Verwenden Sie den folgenden Code zum Senden von Dateiinformationen. IFormFile ist immer Null. Ich habe den gleichen Namen in Post-Eingabe und in API-Parameter verwendet, immer noch kein Glück. Bitte hilf mir.

Formdata

this.formData.append("file", f,f.name); 

Komponentenmethode

public UploadFiles() { 
     console.log("Form Data:" + this.formData); 

     let saved: boolean = false; 
     this.claimsService 
      .UploadFiles(this.formData) 
      .subscribe(data => { 
       saved = data; 
      }, error => { 
       console.log(error) 
       swal(error); 

      }) 
    } 

Service-Methode

UploadFiles(data: FormData): Observable<boolean> { 
     return this.ExecuteFilePost("Upload/Upload", data); 
    } 

Base Service Methode:

public ExecuteFilePost(action: string, data: FormData) { 
     let _body = data; 

     let headers = new Headers({ 'Content-Type': undefined}); 

     let url = this._baseUrl + action; 

     let requestoptions: RequestOptions = new RequestOptions({ 
      headers: headers, 
     }); 

     console.log('req url:' + url); 
     return this.http.post(url,_body,requestoptions) 
      .share() 
      .map((res: Response) => { 
       if (res.status < 200 || res.status >= 300) { 
        throw new Error('This request has failed ' + res.status); 
       } 
       else { 
        return res.json(); 
       } 
      }); 

    } 

WebAPI Methode

[HttpPost] 
     [ActionName("Upload")] 
     public async Task Upload(IFormFile file) 
     { 

      var uploads = Path.Combine(_environment.WebRootPath, "uploads"); 
      // foreach (var file in files) 
      // { 
       if (file.Length > 0) 
       { 
        using (var fileStream = new FileStream(Path.Combine(uploads, file.FileName), FileMode.Create)) 
        { 
         await file.CopyToAsync(fileStream); 
        } 
       } 
      // } 
     } 

Chrome Anfrage Bildschirme enter image description here

Answer 1

Ich weiß, die Post ist alt, aber vielleicht für andere. Sie können Dinge tun, wie folgt:

HTML:

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

Komponente:

@ViewChild("fileInput") fileInput; 

    addFile(): void { 
     let fi = this.fileInput.nativeElement; 
     if (fi.files) { 
      let fileToUpload = fi.files; 
      this.settingsService 
       .upload(fileToUpload) 
       .subscribe(res => { 
        console.log(res); 
       }); 
     } 
    } 

Service:

upload(files: any) { 
     let formData = new FormData(); 
     for (let i = 0; i < files.length; i++) { 
      formData.append("files", files[i]); 
     } 

     return this.http 
      .post(fileUploadApi, formData) 
      .map(response => this.extractData(response as Response)) 
      .catch(error => this.httpErrorHandlerService.responseError(error)); 
    } 

Web API

[HttpPost] 
     [Route("Upload")] 
     public IActionResult UploadFiless([FromForm] IFormFileCollection files) 
     { 
      try 
      { 
       return this.Ok(); 
      } 
      catch (Exception) 
      { 
       return this.BadRequest(); 
      } 
     }