Przesyłanie adres obrazka przez API

0

Cześć. Chciałbym wyświetlić obrazek którego ścieżkę przechowuje w bazie. Mam aplikację FR Angular BE na .net corze. Jak przesłać a następnie wyświetlić obrazek którą przechowuję w bazie sciężkę:
Controller wygląda tak:

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Threading.Tasks;
using API.Data;
using API.Models;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;

namespace API.Controllers
{
    [Route("[controller]")]
    [ApiController]
    public class TenureController : ControllerBase
    {
        private readonly ApplicationDbContext dbContext;
        private readonly IHostingEnvironment host;
        private readonly string[] ACCEPTED_FILE_TYPES = new[] { ".jpg", ".jpeg", ".png" };

        public TenureController(ApplicationDbContext dbContext, IHostingEnvironment host)
        {
            this.dbContext = dbContext;
            this.host = host;
        }

        [HttpGet]
        [Route("GetAll")]
        public IActionResult GetAll()
        {
            return Ok(dbContext.Tenures.ToList());
        }

        [HttpGet]
        [Route("{id}/Get")]
        public IActionResult Get(int id)
        {
            return Ok(dbContext.Tenures.SingleOrDefault(x=>x.Id == id));
        }

        [HttpPost]
        [Route("Create")]
        public IActionResult Create([FromForm]TenureEdit tenureEdit)
        {

            string logoUrlString = UploadImage(tenureEdit.ImageUrl);
            var tenure = new Tenure
            {
                Name = tenureEdit.Name,
                Rate = tenureEdit.Rate,
                ImageUrl = logoUrlString
            };

            dbContext.Tenures.Add(tenure);
            dbContext.SaveChanges();


            return Ok();
            
        }

        [HttpPut]
        [Route("{id}/Edit")]
        public IActionResult Edit(int id, [FromBody]TenureEdit tenureEdit)
        {
            var tenure = dbContext.Tenures.SingleOrDefault(x => x.Id == id);

            if (tenure == null)
            {
                return BadRequest();
            }

            tenure.Name = tenureEdit.Name;
            tenure.Rate = tenureEdit.Rate;

            dbContext.Entry(tenure).State = Microsoft.EntityFrameworkCore.EntityState.Modified;
            dbContext.SaveChanges();

            return Ok();
        }

        public string UploadImage(IFormFile file)
        {
            if (file == null) throw new Exception("Pusty plik");
            if (file.Length == 0)
            {
                throw new Exception("Pusty plik");
            }
            if (!ACCEPTED_FILE_TYPES.Any(s => s == Path.GetExtension(file.FileName).ToLower())) throw new Exception("Zły typ pliku");

            if (string.IsNullOrWhiteSpace(host.WebRootPath))
            {
                host.WebRootPath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot");
            }
            var uploadFilesPath = Path.Combine(host.WebRootPath, "images");
            if (!Directory.Exists(uploadFilesPath))
                Directory.CreateDirectory(uploadFilesPath);
            var fileName = Guid.NewGuid().ToString() + Path.GetExtension(file.FileName);
            var filePath = Path.Combine(uploadFilesPath, fileName);
            using (var stream = new FileStream(filePath, FileMode.Create))
            {
                file.CopyToAsync(stream);
            }
            var path = Path.Combine(Directory.GetCurrentDirectory(), @"/wwwroot/images/", fileName);

            return path;
        }
    }
}

a obrazki fizycznie przechowuje tutaj :
https://zapodaj.net/a8829a7a3a90b.png.html

0

Wysyłasz do klienta stringa, w którym podajesz ścieżkę gdzie znajduje się plik

images/plik.jpg

A klient sobie łączy przesłaną ścieżkę, z adresem serwera gdzie jest plik.

localhost/images/plik.jpg

Ewentualnie przesyłasz ścieżkę z adresem serwera

file= new File()
                {
                    Id = Guid.NewGuid(),
                    Name = model.Cover.Name,
                    Path = "images/cover/" + hash,
                };

Tak wygląda u mnie uproszony model do bazy, który zapisuje w niej.
hash jest to nazwa pliku na serwerze, który sobie generuje i jest unikalny, aby w momencie przesłania plików o tej samej nazwie nic się nie sypło.

W momencie jak mam zapytanie o plik wysyłam Path do klienta. Klient sobie to łączy z adresem serwera i wszystko ładnie działa.

0

Kurcze włąsnie mam coś takiego ale z automatu dokleja mi się adres clienta :/

<img [src]="item.imageUrl" alt="">

http://localhost:4200/wwwroot/images/252f2d69-7ba5-42ce-af3d-c0e2c27cdbdc.png

0

Z API zwróć tylko Guid i "sklej" url po stronie angulara.
coś takiego :

<img src="/wwwroot/images/{{item.imageUrl}}" alt="">
0

i kurcze ciągle mam ten błąd
GET http://localhost:4200/wwwroot/images/252f2d69-7ba5-42ce-af3d-c0e2c27cdbdc.png 404 (Not Found)

0

Według mnie do plików z wwwroot wcale nie powinno się odwoływać przez podanie wwwroot w urlu.

Doczytaj jak działa UseStaticFiles.
https://docs.microsoft.com/en-us/aspnet/core/fundamentals/static-files?view=aspnetcore-3.1

1 użytkowników online, w tym zalogowanych: 0, gości: 1