如何将数据+多个文件从Angular上传到.NET core Web Api

Question

我的服务器使用.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生成客户端服务，但当前存在一个上传多个文件的bug(https://github.com/rsuter/nswag/issues/1421#issuecomment-424480418)，所以我扩展了更新方法来创建我的，下面是代码：

 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。但我们也可以想象有这种情况：

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？

谢谢

Answer 1

从此处阅读maherjendoubi的答案:https://forums.asp.net/t/2099194.aspx？net+Core+Web+API+How+To+Upload+Multi+Part+Form+Data

public ActionResult CreateDocument()
{
      foreach(var key in Request.Form.Keys)
        {
            var data = JsonConvert.DeserializeObject<ChildSampleDetailsDto>(Request.Form[key]);
            var file = Request.Form.Files["file" + key];

        }
        return Ok();
    }

对于角度部分，请使用httpRequest:

const sendable = new FormData();

for (let i; i < files.length; i++) {
    sendable.append('filedata' + i, files[i], files[i].name);
    sendable.append('data' + i, JSON.stringify(data[i]));
}
const request = new HttpRequest(item.method,
      item.url,
      sendable,
      {
        reportProgress: true
      });
// this._http: HttpClient
this._http.request(request)
      .subscribe((event: any) => {
        if (event.type === HttpEventType.UploadProgress) {
          // on progress code
        }
        if (event.type === HttpEventType.Response) {
          // on response code
        }
      }, error => {
        // on error code
      });

Answer 2

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

角度编码：

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核心代码：

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