使用Asp.Net Core Web API文件上传文件始终为null

发布时间：2020-12-16 03:43:19 所属栏目：asp.Net 来源：网络整理

导读：我正在使用带有ASP.NET核心Web API的Angular 2来实现文件上传来处理请求. 我的HTML代码如下： input #fileInput type="file"/button (click)="addFile()"Add/button 和angular2代码 addFile(): void { let fi = this.fileInput.nativeElement; if (fi.files

我正在使用带有ASP.NET核心Web API的Angular 2来实现文件上传来处理请求.

我的HTML代码如下：

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

和angular2代码

addFile(): void {
    let fi = this.fileInput.nativeElement;
    if (fi.files && fi.files[0]) {
        let fileToUpload = fi.files[0];
        this.documentService
            .uploadFile(fileToUpload)
            .subscribe(res => {
                console.log(res);
        });
    }
}

和服务看起来像

public uploadFile(file: any): Observable<any> {
    let input = new FormData();
    input.append("file",file,file.name);
    let headers = new Headers();
    headers.append('Content-Type','multipart/form-data');
    let options = new RequestOptions({ headers: headers });
    return this.http.post(`/api/document/Upload`,input,options);
}

和控制器代码

[HttpPost]
public async Task Upload(IFormFile file)
{
    if (file == null) throw new Exception("File is null");
    if (file.Length == 0) throw new Exception("File is empty");

    using (Stream stream = file.OpenReadStream())
    {
        using (var binaryReader = new BinaryReader(stream))
        {
            var fileContent = binaryReader.ReadBytes((int)file.Length);
            //await this.UploadFile(file.ContentDisposition);
        }
    }
}

我的RequestHeader看起来像

POST /shell/api/document/Upload HTTP/1.1
Host: localhost:10050
Connection: keep-alive
Content-Length: 2
Authorization: Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJDb3JyZWxhdGlvbklkIjoiZDZlNzE0OTUtZTM2MS00YTkxLWExNWUtNTc5ODY5NjhjNDkxIiwiVXNlcklkIjoiMSIsIlVzZXJOYW1lIjoiWjk5OTkiLCJXb3Jrc3BhY2UiOiJRc3lzVFRAU09BVEVNUCIsIk1hbmRhbnRJZCI6IjUwMDEiLCJDb3N0Q2VudGVySWQiOiIxMDAxIiwiTGFuZ3VhZ2VDb2RlIjoiMSIsIkxhbmd1YWdlU3RyaW5nIjoiZGUtREUiLCJTdGF0aW9uSWQiOiI1NTAwMSIsIk5hbWUiOiJJQlMtU0VSVklDRSIsImlzcyI6InNlbGYiLCJhdWQiOiJodHRwOi8vd3d3LmV4YW1wbGUuY29tIiwiZXhwIjoxNDk1Mzc4Nzg4LCJuYmYiOjE0OTUzNzUxODh9.5ZP7YkEJ2GcWX9ce-kLaWJ79P4d2iCgePKLqMaCe-4A
Origin: http://localhost:10050
User-Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML,like Gecko) Chrome/58.0.3029.110 Safari/537.36
Content-Type: multipart/form-data
Accept: application/json,text/plain,*/*
Referer: http://localhost:10050/fmea/1064001/content
Accept-Encoding: gzip,deflate,br
Accept-Language: en-US,en;q=0.8

我面临的问题是控制器中的文件始终为null.

请有人帮助我搞清楚这个问题.

提前致谢.

解决方法

您不需要对FormData使用’multipart / form-data’

在Angular 2组件中：

<input type="file" class="form-control" name="documents" (change)="onFileChange($event)" />

onFileChange(event: any) {
    let fi = event.srcElement;
    if (fi.files && fi.files[0]) {
        let fileToUpload = fi.files[0];

        let formData:FormData = new FormData();
         formData.append(fileToUpload.name,fileToUpload);

        let headers = new Headers();
        headers.append('Accept','application/json');
        // DON'T SET THE Content-Type to multipart/form-data,You'll get the Missing content-type boundary error
        let options = new RequestOptions({ headers: headers });

        this.http.post(this.baseUrl + "upload/",formData,options)
                 .subscribe(r => console.log(r));
    }
}

在API方面

[HttpPost("upload")]
public async Task<IActionResult> Upload()
{
    var files = Request.Form.Files;

    foreach (var file in files)
    {
       // to do save
    }

    return Ok();
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!