如何将图像和数据(如姓名，年龄，id，性别)一起从dotnet core webapi控制器发送到角度前端并在前端使用它

Question

如何将图像和数据(如姓名，年龄，id，性别(一起从dotnet core webapi发送到Angular前端并使用它。这是我一次将产品保存到后端的方式。

addNewProduct(productToAdd: any) {
let formdata: FormData = new FormData();
formdata.append('photo', productToAdd.photo, productToAdd.photoName);//Here is the product photo 
formdata.append('name', productToAdd.name);
formdata.append('description', productToAdd.description);
formdata.append('price', productToAdd.price);
formdata.append('isInStock', productToAdd.isInStock)
return this._http.post(BASE_URL + 'product/add', formdata).subscribe();
}

[HttpPost("[action]")]
[Authorize(Policy = "Adminstrator")]
public async Task Add()
{
IFormFile file = HttpContext.Request.Form.Files["photo"];
string uploadsFolder = Path.Combine(environment.ContentRootPath, "images");
string uniqueFileName = Guid.NewGuid().ToString() + "_" + file.FileName;
string filePath = Path.Combine(uploadsFolder, uniqueFileName);
Product product = new Product
{
Name = HttpContext.Request.Form["name"],
Description = HttpContext.Request.Form["description"],
Price = Convert.ToDouble(HttpContext.Request.Form["price"]),
PhotoName = uniqueFileName,
IsInStock = Convert.ToBoolean(HttpContext.Request.Form["isInStock"])
};
using (var fileStream = new FileStream(filePath, FileMode.Create))
{
_context.Products.Add(product);
await _context.SaveChangesAsync();
await file.CopyToAsync(fileStream);
}
}

现在我希望相反的东西将带有图像的相同数据从webapi发送到角度前端

Answer 1

现在我希望相反的东西将带有图像的相同数据从webapi发送到角度前端

如果您想将带有图像的产品数据传递到 Angular 前端应用程序以显示产品信息，您可以在数据中包含图像路径信息，而不是直接传递图像文件，如下所示。

在 API 控制器操作中

var product = new Product
{
name = "product_name_here",
description = "blabla..",
//...
//other properties
//...
//pass path info of product image
photo = "images/filename.png"
};

在角度前端

this.getProduct().subscribe(p => {
this.product = p;
this.product.photo = 'https://<api_server_address>/' + this.product.photo;
});

函数获取产品

getProduct(): Observable<Product> {
return this.http.get<Product>('https://<api_server_address>/getproduct');
}

在启动中.cs

app.UseStaticFiles(new StaticFileOptions
{
FileProvider = new PhysicalFileProvider(
Path.Combine(Directory.GetCurrentDirectory(), "images")),
RequestPath = "/images"
});

Answer 2

使用 Dotnet Core API，从 API 端点返回 json 对象非常简单。

您可以创建一个对象以通过请求发回。

public class ReturnObject
{
public string Name { get; set; }
public string Description { get; set; }
public double Price { get; set; }
public string PhotoName { get; set; }
public bool IsInStock { get; set; }
}

然后是控制器端点

[HttpPost("[action]/{id}")]
[Authorize(Policy = "Adminstrator")]
public async Task<ReturnObject> Get(string id)
{
// Gather your data to return
return new ReturnObject()
{
Name = "Name",
Description = "Description",
Price = 299,
PhotoName = "Photo Name",
IsInStock = false
};
}

return 对象定义要返回的数据的结构，例如，您可以从角度应用中调用{URL}/get/myId。