• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

VPS Starter Arubacloud
0 głosów
149 wizyt
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

+2 głosów
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 :)
0 głosów
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ć.

Podobne pytania

0 głosów
1 odpowiedź 248 wizyt
pytanie zadane 21 października 2016 w SQL, bazy danych przez MatexQ Bywalec (2,260 p.)
+1 głos
0 odpowiedzi 276 wizyt
0 głosów
0 odpowiedzi 195 wizyt

92,452 zapytań

141,262 odpowiedzi

319,085 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...