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

Question

我的代码只能将数据传递给Web API,但我想在同一个请求中使用angular 2 + typescript和ASP.Net Core Web API在不同的请求中传递数据和Image .

我的代码将数据传递给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);
    }

Answer 1

解决方案1:

最简单的方法是将图像作为base64字符串发送.

只需创建一个简单的JavaScript函数来读取文件并将其转换为base64字符串.在发送文件之前执行此操作 - 可能onchange事件<input>将为您完成工作.

然后,您可以将其直接存储在DB中(如果需要,可以将其另存为服务器上的文件).

存储为base64字符串的图像可以通过浏览器直接发回和替换而无需其他操作,例如:

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

解决方案2:

前端:

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

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

后端:

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

IFormFile file;

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