सबसे पहले, आपको एक HTML फॉर्म बनाना चाहिए जिसमें एक फ़ाइल इनपुट तत्व है । तुम भी करने की जरूरत प्रपत्र के सेट enctype के लिए विशेषता बहुखण्डीय / फार्म-डेटा :
<form method="post" enctype="multipart/form-data" action="/upload">
<input type="file" name="file">
<input type="submit" value="Submit">
</form>
प्रपत्र मान लिया जाये कि में परिभाषित किया गया है index.html नाम के एक निर्देशिका में संग्रहीत सार्वजनिक जहां अपनी स्क्रिप्ट स्थित है के सापेक्ष, आप इसे इस तरह से सेवा कर सकते हैं:
const http = require("http");
const path = require("path");
const fs = require("fs");
const express = require("express");
const app = express();
const httpServer = http.createServer(app);
const PORT = process.env.PORT || 3000;
httpServer.listen(PORT, () => {
console.log(`Server is listening on port ${PORT}`);
});
// put the HTML file containing your form in a directory named "public" (relative to where this script is located)
app.get("/", express.static(path.join(__dirname, "./public")));
एक बार ऐसा हो जाने के बाद, उपयोगकर्ता उस फॉर्म के माध्यम से आपके सर्वर पर फाइल अपलोड कर सकेंगे। लेकिन आपके आवेदन में अपलोड की गई फ़ाइल को फिर से इकट्ठा करने के लिए, आपको अनुरोध निकाय (मल्टीपार्ट फॉर्म डेटा के रूप में) को पार्स करना होगा।
में एक्सप्रेस 3.x आप इस्तेमाल कर सकते हैं express.bodyParserबहुखण्डीय रूपों को संभालने के लिए मिडलवेयर लेकिन के रूप में एक्सप्रेस 4.x , वहाँ कोई शरीर पार्सर ढांचे के साथ बंडल है। सौभाग्य से, आप कई उपलब्ध मल्टीपार्ट / फॉर्म-डेटा पार्सर में से एक का चयन कर सकते हैं । यहाँ, मैं multer का उपयोग करूँगा :
फ़ॉर्म पोस्ट को संभालने के लिए आपको एक मार्ग निर्धारित करना होगा:
const multer = require("multer");
const handleError = (err, res) => {
res
.status(500)
.contentType("text/plain")
.end("Oops! Something went wrong!");
};
const upload = multer({
dest: "/path/to/temporary/directory/to/store/uploaded/files"
// you might also want to set some limits: https://github.com/expressjs/multer#limits
});
app.post(
"/upload",
upload.single("file" /* name attribute of <file> element in your form */),
(req, res) => {
const tempPath = req.file.path;
const targetPath = path.join(__dirname, "./uploads/image.png");
if (path.extname(req.file.originalname).toLowerCase() === ".png") {
fs.rename(tempPath, targetPath, err => {
if (err) return handleError(err, res);
res
.status(200)
.contentType("text/plain")
.end("File uploaded!");
});
} else {
fs.unlink(tempPath, err => {
if (err) return handleError(err, res);
res
.status(403)
.contentType("text/plain")
.end("Only .png files are allowed!");
});
}
}
);
ऊपर दिए गए उदाहरण में, .png / / पर अपलोड की गई फ़ाइलों को स्क्रिप्ट जहां स्थित है, उसके सापेक्ष अपलोड निर्देशिका में सहेजा जाएगा ।
अपलोड की गई छवि दिखाने के लिए, मान लें कि आपके पास पहले से ही एक HTML पृष्ठ है जिसमें एक img तत्व है:
<img src="/image.png" />
आप अपने एक्सप्रेस ऐप में किसी अन्य मार्ग को परिभाषित कर सकते हैं और res.sendFileसंग्रहीत छवि की सेवा के लिए उपयोग कर सकते हैं:
app.get("/image.png", (req, res) => {
res.sendFile(path.join(__dirname, "./uploads/image.png"));
});
FAQयह जानने के लिए कि यहां किस तरह के प्रश्न पूछे जाने चाहिए। वैसे भी, मैं इस बार आपके सवाल का जवाब दूंगा।