Angular 2 mit Web-API-Datei hochladen

Question

Ich versuche, Datei mit Angular 2 mit Web-API hochladen, aber ich bekomme keine Datei auf dem Server.

Mein Controller-Methode ist

[HttpPost] 
    [Route("add")] 
    public IHttpActionResult Add(CourseDto course) 
    { 
     try 
     { 
      return Ok(""); 
      //course.CompanyId = User.Identity.GetUserId<int>(); 
      //var result = _courseService.Add(course); 
      //return Ok(result.Message); 
     } 
     catch (Exception ex) 
     { 

      return BadRequest(ex.Message); 
     } 

    } 

Mein CourseDto

ist

public class CourseDto 

    { 
     public int Id { get; set; } 
     public HttpPostedFileBase CourseFile { get; set; } 
    } 

Meine HTML-Datei ist

<form class="form-horizontal" #courseForm="ngForm" (ngSubmit)="onSubmit()" enctype="multipart/form-data"> 

      <div class="form-group"> 
       <label class="control-label col-sm-4">Browse Course:</label> 
       <div class="col-sm-8"> 
        <input type="file" name="file" (change)="onChange($event)"/> 

       </div> 
      </div> 
      <footer> 
       <div class="row"> 
        <div class="col-md-12 col-lg-12 col-xs-12"> 
         <div class="pull-right"> 
          <button type="submit" class="btn btn-primary" [disabled]="!courseForm.form.valid">Add</button> 
          <button type="button" class="btn btn-default" (click)="close()">Close</button> 
         </div> 
        </div> 
       </div> 
      </footer> 
     </form> 

Kursmodell für Typoskript

export class Course { 
    constructor(
     public courseFile?:any , 
     public id?: number 
    ) { 
    } 
} 

ist

Meine Angular 2 Komponenten-Verfahren ist Verfahren

onSubmit() { 
     this.httpService.post("course/add", this.courseModel) 
      .subscribe(result => { 
       this.loggerService.notify(this, "Courses added successfully", Toast[Toast.success]); 
       this.httpService.onUpdateModel(); 
       this.refreshModel(); 
      }, error => { 
       console.log(error); 
      }); 
    } 

    onChange(event) { 
     this.courseModel.courseFile =event.target.files[0]; 

    } 

Angular 2 Http Post-Methode ist

ist

post(url: string, data: any) { 
     url = `${appConfig.apiUrl}${url}`; 

     this.progressBarService.RequestStarted(); 


     return this.http.post(url, data) 
      .finally(() => this.progressBarService.RequestFinished()) 
      .map((result: Response) => result.json()) 
      .catch(this.handleError); 
    } 

ich das Modell erfolgreich empfangen meine Web-API-Controller in aber ohne Datei. Wie sende ich die Datei an das Web-API-Controller-Modell?

Answer 1

versuchen, diese

HttpResponseMessage response = new HttpResponseMessage(); 
var httpRequest = HttpContext.Current.Request; 
if (httpRequest.Files.Count > 0) 
{ 
    foreach (string file in httpRequest.Files) 
    { 
     var postedFile = httpRequest.Files[file]; 
     var filePath = HttpContext.Current.Server.MapPath("~/UploadFile/" + postedFile.FileName); 
     postedFile.SaveAs(filePath); 
    } 
} 

dank Angular 2 - File Upload using Web API

Hoffnung diese Hilfe

Answer 2

Schritt 1: Ng2/4 Html-

<input type="file" name="ProfilePhoto" id="ProfilePhoto" /> 

Schritt 2: Ng2/4 Komponenten-

import { ElementRef} from '@angular/core'; 
let files=this.elem.nativeElement.querySelector('#ProfilePhoto').files; 
     let formData:FormData=new FormData(); 

     let file=files[0]; 
     formData.append('ProfilePhoto',file,file.name);   
     this.systemUserService.uploadSystemUserProfilePhoto(this.loginResponse.token,formData).subscribe(data => { 
     }); 

auf Service hinzugefügt werden --- Hinweis: Hier habe ich Token basierte Authentifizierung verwendet, können Sie normale http Post.

uploadSystemUserProfilePhoto(token:string,formData: FormData): Observable<GlobalBaseResponse> { 
      let options=this.getFileUploadHeader(token);        
      return this.http.post(`${this.globalConstant.baseApiUrl}/account/uploadSystemUserProfilePhoto`, formData, options) 
        .map((response: Response) => { 
          this.globalBaseResponse = response.json(); 
          return this.globalBaseResponse; 
        }); 
    } 

      private getFileUploadHeader(token:string):RequestOptions{ 
      let headers = new Headers({ 
        'Data-Type': 'json', 
        // 'Content-Type': false, 
        // 'Process-Data':false, 
        'Authorization':'Bearer '+token 
      }); 
      let options = new RequestOptions({ headers: headers }); 
      return options; 
    } 

Schritt 3: auf Asp.net web api Projekt api Controller Methoden-

[HttpPost] 
    [Route("uploadsystemuserprofilephoto")]  
    public IHttpActionResult UploadSystemUserProfilePhoto() 
    { 
     var response = new ResponseModel(); 

     var httpResponseMessage = new HttpResponseMessage(); 
     var httpRequest = HttpContext.Current.Request; 
     if (httpRequest.Files.Count > 0) 
     { 
      foreach (string file in httpRequest.Files) 
      { 
       var postedFile = httpRequest.Files[file]; 
       var filePath = HttpContext.Current.Server.MapPath($"~/webshared/user/{postedFile.FileName}"); 
       postedFile.SaveAs(filePath); 
      } 
     }   

     response.IsSuccess = true; 
     response.Message = "Success, User profile photo updated!"; 
     return Ok(response);    
    } 

Ich denke, das wird für Sie hilfreich. Danke