Bilder aus Server in HTML anzeigen

[busgi]

Hallo Leute,

ich bin gerade etwas verwirrt.

Ich habe auf meiner Webseite einen File Uploader eingebaut und der Upload der Bilder funktioniert auch soweit. Nun möchte ich,
dass das Bild, welches hochgeladen wurde automatisch in einem div container auf der Webseite angezeigt wird.

Ich habe den Upload mit node hinbekommen.

Hier mein code

server.use(upload())

server.get('/', (req, res) =>{
   res.sendFile(__dirname + '/home.html')
})

server.post('/', (req,res)=>{
  if(req.files){
    console.log(req.files)
    var file = req.files.file
    var filename = file.name
    console.log(filename)

    file.mv('./upload/' + filename, function(err){
      if(err){
        res.send(err)
      }else{
        res.send("File Uploaded")
      }
    })
  }
});

Das Bild, welches hochgeladen wurde, soll automatisch hier angezeigt werden:

<div class="wrapper">
   <h2>Your image here</h2>
</div>

Meine Tutorin,meinte, ich solle weitere REST-Routen implementieren um einen Zugriff auf das dateisystem zu erlangen (mit fs im node.js). Der Server soll es dann an den client ausliefern.
Ich komme hier einfach nicht weiter 🙁

 

[M.L.]

Was darf noch an Modulen verwendet werden ? Ansonsten könnte man sich hier inspirieren lassen: https://www.w3schools.com/nodejs/nodejs_uploadfiles.asp

 

[busgi]

Was darf noch an Modulen verwendet werden ? Ansonsten könnte man sich hier inspirieren lassen: https://www.w3schools.com/nodejs/nodejs_uploadfiles.asp

Es sind alle node-modules erlaubt. Frameworks wie ajax, angular,vuejs und jquery sind leider nicht erlaubt.

Danke für den link. Soweit ich es sehe, glaube ich, dass es wieder eine methode ist wie man bilder an einen server sendet umd speichert. Ich muss aber diese bilder auf der Webseite anzeigen lassen. Ich habe diverse codes mit multer probiert, ich habe auch hier geschafft die bilder auf den server zu laden, konnte es aber nicht auf der webseite bzw. Im div container anzeigen lassen.

 

[kneitzel]

Wenn du da das Bild hoch lädst, dann kannst du im Server doch noch eine URL für den Download anbieten.

Dann dürfte zum Anzeigen ein img Tag mit entsprechender URL als src doch ausreichen zum anzeigen.

 

[busgi]

Wenn du da das Bild hoch lädst, dann kannst du im Server doch noch eine URL für den Download anbieten.

Dann dürfte zum Anzeigen ein img Tag mit entsprechender URL als src doch ausreichen zum anzeigen.

Gibt es hierzu irgendwo im Web beispiele dazu?
Irgendwelche Portale?

 

[kneitzel]

Images bereit stellen mit nodejs:

node.js http server respond with an image by request - Codexpedia

Objective: Create node js http server accepting requests with a query parameter image containing the an image name, respond with the image specified in the query. Solution: Include http, url and fs node modules. Use http to create http server, url to parse the incoming request to get the image...

www.codexpedia.com

Und zu dem img Tag von HTML gibt es extrem viele Seiten ... w3schools z.B.:

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com