প্রথম সব, আপনি একটি ধারণকারী একটি HTML ফর্ম করা উচিত ফাইল ইনপুট উপাদান । এছাড়াও আপনি প্রয়োজন ফর্মের সেট enctype করার অ্যাট্রিবিউট একাধিক / ফর্ম-ডেটা :
<form method="post" enctype="multipart/form-data" action="/upload">
<input type="file" name="file">
<input type="submit" value="Submit">
</form>
ধরে নিই যে ফর্মটি আপনার স্ক্রিপ্টটি যেখানে রয়েছে সে সম্পর্কিত সম্পর্কিত সার্বজনীন নামের একটি ডিরেক্টরিতে সংরক্ষিত একটি ডিরেক্টরিতে সূচক 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}`);
});
app.get("/", express.static(path.join(__dirname, "./public")));
এটি হয়ে গেলে ব্যবহারকারীরা সেই ফর্মের মাধ্যমে আপনার সার্ভারে ফাইলগুলি আপলোড করতে সক্ষম হবেন। তবে আপনার অ্যাপ্লিকেশনটিতে আপলোড করা ফাইলটি পুনরায় জমা দেওয়ার জন্য আপনাকে অনুরোধের বডিটি পার্স করতে হবে (মাল্টিপার্ট ফর্ম ডেটা হিসাবে)।
ইন এক্সপ্রেস 3.x আপনি ব্যবহার করতে পারে express.bodyParser
একাধিক ফরম হ্যান্ডেল করতে মিডলওয়্যার কিন্তু হিসাবে এক্সপ্রেস 4.x , কোন শরীর পার্সার ফ্রেমওয়ার্ক সাথে বান্ডেল আছে। ভাগ্যক্রমে, আপনি সেখানে প্রচুর উপলভ্য বহুগুণ / ফর্ম-ডেটা পার্সারগুলির মধ্যে একটি চয়ন করতে পারেন । এখানে, আমি মাল্টার ব্যবহার করব :
ফর্ম পোস্টগুলি পরিচালনা করতে আপনাকে একটি রুট সংজ্ঞায়িত করতে হবে:
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"
});
app.post(
"/upload",
upload.single("file" ),
(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 src="/image.png" />
আপনি আপনার এক্সপ্রেস অ্যাপ্লিকেশনটিতে অন্য একটি রুট নির্ধারণ করতে পারেন এবং res.sendFile
সঞ্চিত চিত্রটি পরিবেশন করতে ব্যবহার করতে পারেন :
app.get("/image.png", (req, res) => {
res.sendFile(path.join(__dirname, "./uploads/image.png"));
});
FAQ
এখানে কী ধরণের প্রশ্ন জিজ্ঞাসা করা উচিত তা একবার দেখে নিন । যাইহোক, আমি এবার আপনার প্রশ্নের উত্তর দেব।