Angular 2與Web API文件上傳

Question

我想上傳文件使用Angular 2與Web API，但我沒有得到服務器上的文件。

我的控制器的方法是

[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); 
     } 

    } 

我CourseDto是

public class CourseDto 

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

我的HTML文件是

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

場模型對於打字稿是

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

我的角2組件的方法是方法

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]; 

    } 

角2 HTTP POST方法是

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); 
    } 

我成功接收模式在我的Web API控制器，但沒有文件。如何將文件發送到web api控制器模型？

Answer 1

這

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); 
    } 
} 

感謝嘗試Angular 2 - File Upload using Web API

希望這有助於

Answer 2

第一步：NG2/4 HTML的

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

第二步：NG2/4成分 -

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 => { 
     }); 

上要添加的服務--- 注意：這裏我使用了基於athentication的token，可以使用普通的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; 
    } 

第三步：在Asp.net的Web API項目的API控制方法 -

[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);    
    } 

我覺得你這會有所幫助。 謝謝