NodeJS i Express - wyświetlanie obrazków z formularza

pytanie zadane 25 maja 2022 w JavaScript przez Maciek273 Początkujący (450 p.)

Chciałbym wyświetlić obrazek za pomocą NodeJS i Expressa, ale nie mam pojęcia jak to zrobić. Szukałem różnych rozwiązań w internecie, ale nie jestem w stanie zrozumieć jak mogę zmodyfikować kod, tak, aby wyświetlał obrazek po wpisaniu URL do formularza. Potrafię pobrać dane z formularza jednak nie wiem, jak URL zamienić na normalny obrazek. Dzięki za wszelką pomoc :)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="dodaj" method="POST">
        <p>
            URL: <input type="text" name="url">
        </p>
        <p>
            Opis: <input type="text" name="opis">
        </p>
        <p>
            <input type="submit" value="Wyslij" name="przycisk">
        </p>
    </form>
</body>
</html>

const express = require('express');
const app = express();
let date = new Date();

app.use(express.static('public'));
app.use(express.urlencoded({extended: true}));


app.post('/dodaj', (req, res) => {
	if (req.body.url !== '' && req.body.opis !== ''){
		res.send(req.body.url + "<p></p>" + req.body.opis + "<p></p>" + date);
	}
	else{
		res.send("Error! Zle wypelniony formularz");
	}
});

app.listen(3000);

2 odpowiedzi

odpowiedź 25 maja 2022 przez Oczarowany Użytkownik (600 p.)
edycja 25 maja 2022 przez Oczarowany

Najlepsza

Tak by mogło to wyglądać bez EJS.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="http://localhost:3000/dodaj" method="POST">
        <p>
            URL: <input type="text" name="url">
        </p>
        <p>
            Opis: <input type="text" name="opis">
        </p>
        <p>
            <input type="submit" value="Wyslij" name="przycisk">
        </p>
    </form>
</body>

const express = require('express');

const app = express();

let date = new Date();

app.use(express.static('public'));
app.use(express.urlencoded({extended: true}));

app.post('/dodaj', (req, res) => {
    const { url, opis } = req.body

    if (url !== '' && opis !== ''){
        res.send(`<img src="${url}"><p>${opis}</p><p>${date}</p>`);
    }
    else{
        res.send("Error! Zle wypelniony formularz");
    }
});

app.listen(3000);

komentarz 25 maja 2022 przez Maciek273 Początkujący (450 p.)

Okej, dzięki teraz mniej więcej rozumiem. Nie byłem pewny gdzie umieścić znacznik <img>, ale wszystko mi rozjaśniłeś. Dzięki :)

odpowiedź 25 maja 2022 przez Oczarowany Użytkownik (600 p.)

Skoro to ma być obrazek to gdzie masz znacznik <img> i po co te puste <p> ??

Ja na bym dodał najpierw jakiś silnik szablonów np. EJS następnie po wysłaniu formularza wygenerowałbym widok i dorzucił te dane z formularza. A dane przekazujesz do znacznika img

komentarz 25 maja 2022 przez Maciek273 Początkujący (450 p.)

Jeśli chodzi o p w pliku js, to chciałem w ten sposób umieścić obrazek, opis i datę pod sobą. Czyli raczej bez EJS będzie ciężko to zrobić?

komentarz 25 maja 2022 przez Oczarowany Użytkownik (600 p.)

Ale znacznik <p> nie służy do wyświetlania obrazków tylko znacznik <img>

I po za tym robisz to po za znacznikiem

komentarz 25 maja 2022 przez Maciek273 Początkujący (450 p.)

W sensie chciałem zrobić przerwy, żeby wszystko nie było obok siebie. Po prostu chciałem uzyskać ten sam efekt co <br>. Ale to akurat nie przeszkadza, głównie chodzi o te obrazki.

1	komentarz 25 maja 2022 przez Oczarowany Użytkownik (600 p.) Da się to zrobić bez EJS ale tym prędzej go dodasz tym lepiej dla Ciebie na przyszłość. Silnik szablonów ułatwia po prostu pracę z widokami zamiast się męczyć na sucho. A bardzo łatwo się dodaje więc polecam go dodać.