Jak przesyłać, wyświetlać i zapisywać obrazy za pomocą pliku node.js i ekspresowe

Question

Należy przesłać obraz, wyświetlić go, a także zapisać, aby nie stracić go po odświeżeniu hosta lokalnego. Należy to zrobić za pomocą przycisku "Prześlij", który monituje o wybór pliku.

Używam node.js i wyrażam kod po stronie serwera i jestem naprawdę nowy w programowaniu aplikacji internetowych. Każda pomoc byłaby doceniana.

Dzięki to zaliczka.

Answer 1

Przede wszystkim powinieneś wykonać formularz HTML z numerem file input element. Oto prosty przykład:

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

następnie należy załadować express.bodyParser() middleware:

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

i zdefiniować trasę obsługiwać stanowisko forma:

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!"); 
     }); 
    } 
    // ... 
}); 

pokazać przesłanego pliku, I załóżmy, że masz już stronę HTML z tagiem graficznym:

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

Teraz można użyć res.sendFile służyć przesłanego obrazu:

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