使用Angular 2上传文档时，Web API中的文件计数始终为零

Question

我将尝试使用C#中的Web API上传文件。我使用的代码如下： httpRequest.Files.Count在上传文档时始终为零。 我做错了什么？

mcDocuments.ts文件：

fileChange(event) {
  debugger;
  let fileList: FileList = event.target.files;
  if (fileList.length > 0) {
    let file: File = fileList[0];
    let formData: FormData = new FormData();
    formData.append('uploadFile', file, file.name);
    let token = JSON.parse(Cookie.get('currentUser')).token
    let headers = new Headers();
    headers.append('Access-Control-Allow-Origin', '*');

    headers.append('Authorization', 'bearer ' + token);

    headers.append('UserName',
      JSON.parse(Cookie.get('currentUser')).username);
    headers.append('Content-Type', 'multipart/form-data');

    let options = new RequestOptions({ headers: headers });
    let apiUrl1 = "http://localhost:53732/api/UploadFileApi";
    this.http.post(apiUrl1, formData, options)
      .map(res => res.json())
      .catch(error => Observable.throw(error))
      .subscribe(
      data => console.log('success'),
      error => console.log(error)
      )
  }
  window.location.reload();
}

mcDocuments.html文件

  <input type="file" id="btnUpload" value="Upload" (change)="fileChange($event)" class="upload" /> 

web Api

  using System.Net.Http;
  using System.Web;
  using System.Web.Http;
  namespace FileUpload_WebAPI_Angular2.Controllers
  {
  public class UploadFileApiController : ApiController
  {
    [HttpPost]
    public HttpResponseMessage UploadJsonFile()
    {
        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);
            }
           }
        return response;
       }
     }
   }

module.ts 文件

   declarations: [    McDocumentsComponent,],
   providers: [{ provide: LocationStrategy, useClass: HashLocationStrategy }],
   bootstrap: [McDocumentsComponent]

- Ishara Sandun

---

我按照这个教程进行操作： http://www.c-sharpcorner.com/article/angular-2-file-upload-using-web-api/ - Ishara Sandun

不附加“Content-type”头怎么样？ - Harry Ninh

Answer 1

检查你的拦截器是否设置了content-type。如果是，请将其删除。最初的回答。

- Elialber Lopes

Answer 2

这对我有效： component.html：

<input type="file" id="file" (change)="handleFileInput($event.target.files)">

接口

export interface UploadDoc {
LlojiKampanjesId: number;
FileToUpload: File; }

component.ts

listToUpload: UploadDoc = {LlojiKampanjesId:0, FileToUpload:null};
handleFileInput(files: FileList) {
this.listToUpload.FileToUpload = files.item(0);}
public uploadList() {
this.disableSubmit = true;
this.rastetService.uploadFile(this.listToUpload, this.userInfo.Token).subscribe((result: string) => {
    this.thisDialogRef.close('close');
    this.disableSubmit = false;
  },
    error => {
      if (error instanceof HttpErrorResponse) {

      } 
      else {           
      }
      this.spinnerService.hide();
      this.disableSubmit = false;
    });}

service.ts

uploadFile (listToUpload:UploadDoc,token: string ) {
let headers= new HttpHeaders({'Authorization':'Bearer ' + token});  
const formData: FormData = new FormData();
formData.append('UploadDoc', listToUpload.FileToUpload, listToUpload.FileToUpload.name);
return this.$http
  .post(this.endpointUploadFile, formData, {headers:headers})}

Web API：

[System.Web.Http.HttpPost]
    public HttpResponseMessage UploadList()
    {
        HttpResponseMessage response = new HttpResponseMessage();
        var httpRequest = HttpContext.Current.Request;
        //
        //  -----------------
        //

        return response;
    }

- Shaip Zejnullahu

Answer 3

尝试使用Request.Files或Request.Form.Files替代HttpContext.Current.Request.Files。类似的问题在此处遇到：Request.Files is always null

- alec