如何使用 Angular 2(typescript) 将数据和图像传递到“ASP.NET Core”Web API？

我有只能将数据传递到 Web API 的代码，但我想将数据和图像都传递到同样的要求不在使用 Angular 2 + TypeScript 和 ASP.Net Core Web API 的不同请求中。

我的将数据传递给API的代码：

角度代码：

   create(user) {
    return this.authHttp.post(this._baseUrl + 'user/', JSON.stringify(userData)).map((res: Response) => {
        return res;
    }).catch(this.configService.handleError);
}

API代码：

    [HttpPost]
    public IActionResult Create([FromBody]UserModel user)
    {
        if (!ModelState.IsValid)
        {
            return BadRequest(ModelState);
        }

        //save user
        _userRepository.Add(user);
        _userRepository.Commit();

        return new OkObjectResult(user.UserId);
    }

解决方案一：

最简单的方法是将图像作为Base64 字符串 https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding.

只需创建一个简单的 JavaScript 函数来读取文件并将其转换为Base64 字符串 https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding。在发送文件之前执行此操作 - 可能onchange http://msdn.microsoft.com/en-us/library/ms536912(v=vs.85).aspx事件于<input>将为您完成这项工作。

然后你可以将其直接存储在数据库中（或者如果需要的话另存为服务器上的文件）。

存储为 base64 字符串的图像可以直接由浏览器发送回并显示，无需其他操作，例如：

<img src="data:image/bmp;base64,[base64EncodedImageHere]" />

解决方案2：

前端：

如果您使用 HTML5 和文件上传控件，只需将表单编码设置为multipart/form-data:

<form method="post" enctype="multipart/form-data">

Backend:

您在模型中的属性应该具有类型IFormFile，然后您可以将文件保存到服务器上：

IFormFile file;

using (var fileStream = File.Create( [file path here] ))
{
    await file.CopyToAsync(fileStream);
    await fileStream.FlushAsync();
}