Angular2 到 Asp.net Core Webapi IFormFile 为空答案

【问题标题】：Angular2 to Asp.net Core Webapi IFormFile is nullAngular2 到 Asp.net Core Webapi IFormFile 为空
【发布时间】：2017-04-25 18:20:01
【问题描述】：

我将 angular2 与 asp.net 核心 webapi 一起使用。使用以下代码发送文件信息。 IFormFile 始终为空。我在 post 输入和 api 方法参数中使用了相同的名称，仍然没有运气。请帮帮我。

表单数据

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

组件方法

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

            })
    }

服务方式

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

基本服务方法：

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

[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 请求屏幕 enter image description here

【问题讨论】：

我能够解决这个问题。我做了以下事情。删除 { 'Content-Type': undefined} 添加了 'Accept', 'application/json' 和 ConfigureServices->services.AddCors(options => { options.AddPolicy("CorsPolicy", builder => builder.AllowAnyOrigin() .AllowAnyMethod () .AllowAnyHeader() .AllowCredentials()); });配置-> app.UseCors("CorsPolicy");

标签： asp.net-web-api

【解决方案1】：

我知道这篇文章已经过时了，但也许是给其他人的。你可以这样做：

HTML：

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

组件：

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

服务：

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

网络 API

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

【讨论】：