• 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

Aruba Cloud PRO i VPS, Openstack, VMWare, MS Hyper-V
0 głosów
79 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 (540 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 (540 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 (540 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 (540 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ź 224 wizyt
pytanie zadane 21 października 2016 w SQL, bazy danych przez MatexQ Bywalec (2,260 p.)
+1 głos
0 odpowiedzi 106 wizyt
0 głosów
0 odpowiedzi 162 wizyt

90,303 zapytań

138,899 odpowiedzi

311,090 komentarzy

60,019 pasjonatów

Motyw:

Akcja Pajacyk

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

Sklep oferujący ćwiczenia JavaScript, PHP, rozmowy rekrutacyjne dla programistów i inne materiały

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...