Wie hochzuladen, anzuzeigen und speichern Sie Bilder mit node.js und express

Question

Ich muss ein Bild hochladen und anzeigen, sowie speichern, damit ich nicht verlieren, wenn ich den localhost aktualisieren. Dies muss über die Schaltfläche "Hochladen" erfolgen, die zur Auswahl einer Datei auffordert.

Ich benutze node.js und Express für die serverseitige Code, und bin wirklich neu in der Web-Anwendung Programmierung, Jegliche Hilfe wäre willkommen.

Danke ist Fortschritt.

Answer 1

Zunächst einmal sollten Sie ein HTML Formular mit einem file input element darin machen. Hier ist ein einfaches Beispiel:

<form method="post" enctype="multipart/form-data" action="/upload"> 
    <input type="file" name="file"> 
    <input type="submit" value="Submit"> 
</form> 

dann sollten Sie express.bodyParser() Middleware laden:

app.use(express.bodyParser({uploadDir:'/path/to/temporary/directory/to/store/uploaded/files'})); 

und eine Route zu definieren, um das Formular Post handhaben:

var path = require('path'), 
    fs = require('fs'); 
// ... 
app.post('/upload', function (req, res) { 
    var tempPath = req.files.file.path, 
     targetPath = path.resolve('./uploads/image.png'); 
    if (path.extname(req.files.file.name).toLowerCase() === '.png') { 
     fs.rename(tempPath, targetPath, function(err) { 
      if (err) throw err; 
      console.log("Upload completed!"); 
     }); 
    } else { 
     fs.unlink(tempPath, function() { 
      if (err) throw err; 
      console.error("Only .png files are allowed!"); 
     }); 
    } 
    // ... 
}); 

die hochgeladene Datei zu zeigen, ich Angenommen, Sie haben bereits eine HTML Seite mit einem Bild-Tag:

<img src="/image.png" /> 

Jetzt können Sie res.sendFile verwenden das hochgeladene Bild zu dienen:

app.get('/image.png', function (req, res) { 
    res.sendfile(path.resolve('./uploads/image.png')); 
});