3

我的服务器使用 .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），所以我扩展了更新方法来创建我的，这里是代码：

 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？

谢谢

4

2 回答 2

6

使用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 be the same used as formdata key
{
   // do the magic here
   return NoContent();
}
于 2018-09-27T07:37:35.910 回答
0

在此处阅读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
      });
于 2018-09-26T16:33:37.077 回答