从 Angular 7 传递数据时，API 获取 0 httpRequest 文件计数答案

【问题标题】：API getting 0 httpRequest Files Count when pass data from Angular 7从 Angular 7 传递数据时，API 获取 0 httpRequest 文件计数
【发布时间】：2020-01-24 03:26:16
【问题描述】：

我正在使用以下代码将 angular 7 中的 excel 文件上传到 Web API：

 <input type="file" (change)="fileEvent($event);">

 public fileEvent($event) {
    const fileSelected: File = $event.target.files[0];

    this.masterService.UploadExcel(fileSelected)
        .subscribe((response) => {
            console.log('set any success actions...');
            return response;
        },
        (error) => {
            console.log('set any error actions...');
        });
}
fileToUpload: File = null;
handleFileInput(files: FileList) {
    this.fileToUpload = files.item(0);
}

服务代码：

 UploadExcel(url: string, data: any): Observable<any> {
    this.spinner.show();

    //  headers.append('Content-Type', 'multipart/form-data');  

    let headers = new HttpHeaders({
        'Content-Type': 'multipart/form-data',
        'Authorization': 'Bearer ' + sessionStorage.getItem('auth_token'),
        'CompanyId': sessionStorage.getItem('companyId')
    });
    debugger;
    return this.http.post<any>(AppSettings.apiEndPoint + 'ExcelExample/UploadExcel', data, { headers: headers }).pipe(
        map((res: any) => {
            this.spinner.hide();
            return res
        }),
        catchError((errorRespnse: any) => {
            this.spinner.hide();
            var tempMessage = undefined;
            tempMessage = errorRespnse.error.ModelState.error[0];
            if (tempMessage != undefined) {
                this.notificationService.smallBox('error', tempMessage);
            }
            else {
                this.notificationService.smallBox('error', 'Something went wrong, please contact your administrator.');
            }
            return Observable.throw(errorRespnse);
        }));
}

并尝试使用以下服务代码：

 postFile(fileToUpload: File): Observable<boolean> {
    const endpoint = AppSettings.apiEndPoint + 'ExcelExample/UploadExcel';
    const formData: FormData = new FormData();
    formData.append('fileKey', fileToUpload, fileToUpload.name);
    let headers = new HttpHeaders({
        'Content-Type': 'multipart/form-data',
        'Authorization': 'Bearer ' + sessionStorage.getItem('auth_token'),
        'CompanyId': sessionStorage.getItem('companyId')
    });

    return this.http
        .post(endpoint, formData, { headers: headers })
        .map(() => { return true; })
        .catch((e) => this.handleError(e));
}

API 控制器代码：

    [Route("UploadExcel")]
    [HttpPost]
    public string ExcelUpload()
    {
       string message = "";
        HttpResponseMessage result = null;
        var httpRequest = HttpContext.Current.Request;


        // getting 0 count
        if (httpRequest.Files.Count > 0)
        {
        }
  }

从 API 方面我得到 0 个文件。

我也尝试使用以下 URL：

Angular File Upload

file upload and download in angular 4 typescript

【问题讨论】：

发布masterService的uploadExcel方法体
编辑了我尝试上传文件的所有代码
您使用的是哪个 ASP.NET 版本？
VS 2015 和框架 4.5

标签： angular

【解决方案1】：

首先，尝试将此行添加到 App_Start/WebApiConfig.cs

   config.Formatters.XmlFormatter.SupportedMediaTypes.Add(new System.Net.Http.Headers.MediaTypeHeaderValue("multipart/form-data"));

使用表单数据发布文件

postFile(fileToUpload: File): Observable<boolean> {
    const endpoint = AppSettings.apiEndPoint + 'ExcelExample/UploadExcel';
    const formData: FormData = new FormData();
    formData.append('fileKey', fileToUpload, fileToUpload.name);
    let headers = new HttpHeaders({
        'Content-Type': 'multipart/form-data',
        'Authorization': 'Bearer ' + sessionStorage.getItem('auth_token'),
        'CompanyId': sessionStorage.getItem('companyId')
    });

    return this.http
        .post(endpoint, formData, { headers: headers })
        .map(() => { return true; })
        .catch((e) => this.handleError(e));
}

如果它响应任何异常，请在此处发布

【讨论】：