Как отправить изображение и данные (например, имя, возраст, идентификатор, пол) вместе с do tnet core webapi controller на angular front end и использовать их во внешнем интерфейсе

Question

Как отправить изображение и данные (например, имя, возраст, идентификатор, пол) вместе из do tnet core webapi в angular front end и использовать его. Вот как я сохранил продукт в бэкэнд сразу.

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 в angular front end

Answer 1

Теперь я хочу, чтобы обратная вещь отправляла те же данные с изображением из webapi на angular front end

Если вы хотите передать данные продукта с изображением на ваш Angular приложение переднего плана для отображения информации о продукте, вы можете включать информацию о пути к изображению в данные вместо прямого прохождения файла изображения, как показано ниже.

В действии контроллера API

var product = new Product
{
    name = "product_name_here",
    description = "blabla..",

    //...
    //other properties
    //...

    //pass path info of product image
    photo = "images/filename.png"
};

In Angular интерфейс

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

функция getProduct

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

In Startup.cs

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

Answer 2

С Do tnet Core API действительно просто вернуть json объекты из конечной точки API прямо из коробки.

Вы можете создать объект для отправки обратно через запрос.

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

Возвращаемый объект определяет структуру данных чтобы вернуться, и из вашего приложения angular вы можете позвонить, например, {URL}/get/myId.