如何将数据和图像都传递到"ASP.NET Core"?使用Angular 2(打字稿)的Web API? [英] How to pass data and image both to "ASP.NET Core" Web API using Angular 2(typescript)?
问题描述
我有只可以将数据传递给Web API的代码,但是我想在相同请求中传递数据和图像,而不是在使用angular 2 +打字稿和ASP.Net Core Web API的不同请求中传递数据和图像
I have code that can pass data only to web API but i want to pass data and Image both in same request not in different request using angular 2 + typescript and in ASP.Net Core Web API.
我的代码,将数据传递给API:
My Code to pass data to 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);
}
推荐答案
解决方案1:
最简单的方法是将图像作为 base64字符串.
The simplest way is sending the image as a base64 string.
只需创建一个简单的JavaScript函数即可读取文件并将其转换为 onchange <input>上的事件将为您完成工作.
Just create a simple JavaScript function to read the file and convert it to base64 string. Do it before sending the file - probably onchange event on the <input>
will do the job for you.
然后,您可以将其直接存储在DB中(或根据需要另存为服务器上的文件).
Then you can store it directly in DB (or save as a file on the server if you need).
存储为base64字符串的图像可以通过浏览器直接发送回并显示,而无需其他操作,例如:
Image stored as base64 string can be send back and displaed directly by browser without additional actions, for example:
<img src="data:image/bmp;base64,[base64EncodedImageHere]" />
解决方案2:
前端:
如果您使用HTML5和文件上传控件,只需将表单编码设置为multipart/form-data
:
If you are using HTML5 and a file upload control, just set form encoding as multipart/form-data
:
<form method="post" enctype="multipart/form-data">
后端:
您模型中的属性应为IFormFile
类型,然后您可以将文件保存在服务器上:
Your property in the model should have type IFormFile
, then you can save the file on the server:
IFormFile file;
using (var fileStream = File.Create( [file path here] ))
{
await file.CopyToAsync(fileStream);
await fileStream.FlushAsync();
}
这篇关于如何将数据和图像都传递到"ASP.NET Core"?使用Angular 2(打字稿)的Web API?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!