时间戳

首页 > 解决方案 > 如何将图像和数据（如姓名、年龄、id、性别）从 dotnet core webapi 控制器一起发送到 angular 前端并在前端使用

angular - 如何将图像和数据（如姓名、年龄、id、性别）从 dotnet core webapi 控制器一起发送到 angular 前端并在前端使用

问题描述

如何将图像和数据（如姓名、年龄、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 发送到角度前端

标签： angularasp.net-core-webapi

解决方案

使用 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
        };
    }

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

推荐阅读