如何将数据+多个文件从Angular上传到.net核心Web Api

问题描述

我的服务器使用.Net Core 2.1.402

My server uses .Net Core 2.1.402

这是我的C#课程:

public class SampleDetailsDto
{
    public Guid Id{ get; set; }
    public string Text { get; set; }
    public IEnumerable<string> ImageUrls { get; set; }
    public IFormCollection Images { get; set; }
}

这是我的C#控制器

[HttpPut]
[Route("{id:guid}")]
public async Task<IActionResult> UpdateAsync([FromRoute]Guid id, [FromForm] SampleDetailsDtodto)
{
    Console.WriteLine(dto.Text);
    Console.WriteLine(dto.Images.Length);
    return OK();
}

我使用nswag生成客户端服务，但是当前存在一个错误( https://github.com/RSuter/NSwag/issues/1421#issuecomment-424480418 )，并且上传多个文件，因此我扩展了更新方法来创建我的数据库，代码如下:

I use nswag to generate the client service, but there is currently a bug (https://github.com/RSuter/NSwag/issues/1421#issuecomment-424480418) with upload multiple files, so I extended the update method to create mine, here is the code:

 public update(id: string, dto: SampleDetailsDto | null | undefined): Observable<SampleDetailsDto | null> {
    let url_ = this._baseUrl + "/api/v1/Sample/{id}";
    if (id === undefined || id === null)
      throw new Error("The parameter 'id' must be defined.");
    url_ = url_.replace("{id}", encodeURIComponent("" + id));
    url_ = url_.replace(/[?&]$/, "");

    let options_: any = {
      observe: "response",
      responseType: "blob",
      headers: new HttpHeaders({
        "Accept": "application/json"
      })
    };
    return _observableFrom(this.transformOptions(options_)).pipe(_observableMergeMap(transformedOptions_ => {
      return this._http.put<SampleDetailsDto>(url_,dto, transformedOptions_);
    })).pipe(_observableMergeMap((response_: any) => {
      return this.transformResult(url_, response_, (r) => this.processUpdate(<any>r));
    })).pipe(_observableCatch((response_: any) => {
      if (response_ instanceof HttpResponseBase) {
        try {
          return this.transformResult(url_, response_, (r) => this.processUpdate(<any>r));
        } catch (e) {
          return <Observable<SampleDetailsDto | null>><any>_observableThrow(e);
        }
      } else
        return <Observable<SampleDetailsDto | null>><any>_observableThrow(response_);
    }));
  }

我想同时上传多个文件和数据，在这种情况下，所有图像都链接到SampleDetailsDto.但是我们可以想象也有这种情况:

I would like to upload multiple files and data at the same time, in this case all the images are linked to SampleDetailsDto. But we can imagine have this case kind of case too:

public class SampleDetailsDto
{
    public Guid Id{ get; set; }
    public string Text { get; set; }
    public IEnumerable<ChildSampleDetailsDto> Children{ get; set; }
}

public class ChildSampleDetailsDto
{
    public Guid Id{ get; set; }
    public string Text { get; set; }
    public IEnumerable<string> ImageUrls { get; set; }
    public IFormCollection Images { get; set; }
}

是否可以将数据和多个文件发送到.net Core Web Api?

Is it possible to send Data + multiple files to a .net Core Web Api?

谢谢

推荐答案

使用IFormFile和[FromForm]，并且不访问提取文件的请求.

Use IFormFile and [FromForm] and do not access the request to extract files.

角度代码:

public sendFiles(files: File[], [...]): Observable<any> {
   const formData = new FormData();
   formData.append('files', files); // add all the other properties
   return this.http.post('http://somehost/someendpoint/fileupload/', formData);
}

ASP.NET Core代码:

ASP.NET Core code:

public class MyFileUploadClass
{
   public IFormFile[] Files { get; set; }
   // other properties
}

[HttpPost("fileupload")]
public async Task<IActionResult> FileUpload([FromForm] MyFileUploadClass @class)  // -> property name must same as formdata key
{
   // do the magic here
   return NoContent();
}

这篇关于如何将数据+多个文件从Angular上传到.net核心Web Api的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！