node.js का उपयोग करके छवियों को अपलोड, प्रदर्शित और सहेजने के लिए कैसे करें

Question

मुझे एक छवि अपलोड करने और इसे प्रदर्शित करने की आवश्यकता है, साथ ही इसे सहेजने की आवश्यकता है ताकि जब मैं स्थानीयहोस्ट को रीफ्रेश करता हूं तो मैं इसे खोना नहीं चाहता। इसे "अपलोड" बटन का उपयोग करके किया जाना चाहिए, जो फ़ाइल चयन के लिए संकेत देता है।

मैं node.js का उपयोग कर रहा हूं और सर्वर-साइड कोड के लिए व्यक्त करता हूं, और वेब अनुप्रयोग प्रोग्रामिंग के लिए वास्तव में नया हूं, किसी भी मदद की सराहना की जाएगी।

धन्यवाद अग्रिम है।

Answer 1

सबसे पहले, आपको HTML फॉर्म file input element के साथ बनाना चाहिए।

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

तो आप express.bodyParser() मिडलवेयर लोड होनी चाहिए::

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

और फार्म पद संभालने के लिए एक मार्ग को परिभाषित: यहाँ एक सरल उदाहरण है

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

अपलोड की गई फ़ाइल को दिखाने के लिए, मैं मान लीजिए कि आपके पास पहले से HTML पृष्ठ है जिसमें एक छवि टैग है:

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

अब आप res.sendFile उपयोग कर सकते हैं अपलोड की गई छवि सेवा करने के लिए:

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