আমাকে একটি চিত্র আপলোড করতে হবে এবং এটি প্রদর্শন করতে হবে, পাশাপাশি এটি সংরক্ষণ করতে হবে যাতে লোকালহোস্টটি রিফ্রেশ করার সময় আমি এটি হারাতে না পারি। এটি "আপলোড" বোতামটি ব্যবহার করে করা দরকার যা ফাইল-নির্বাচনের জন্য অনুরোধ করে।
আমি সার্ভার-সাইড কোডের জন্য নোড.জেএস এবং এক্সপ্রেস ব্যবহার করছি।
উত্তর:
প্রথম সব, আপনি একটি ধারণকারী একটি 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}`);
});
// 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 , কোন শরীর পার্সার ফ্রেমওয়ার্ক সাথে বান্ডেল আছে। ভাগ্যক্রমে, আপনি সেখানে প্রচুর উপলভ্য বহুগুণ / ফর্ম-ডেটা পার্সারগুলির মধ্যে একটি চয়ন করতে পারেন । এখানে, আমি মাল্টার ব্যবহার করব :
ফর্ম পোস্টগুলি পরিচালনা করতে আপনাকে একটি রুট সংজ্ঞায়িত করতে হবে:
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 src="/image.png" />
আপনি আপনার এক্সপ্রেস অ্যাপ্লিকেশনটিতে অন্য একটি রুট নির্ধারণ করতে পারেন এবং res.sendFileসঞ্চিত চিত্রটি পরিবেশন করতে ব্যবহার করতে পারেন :
app.get("/image.png", (req, res) => {
res.sendFile(path.join(__dirname, "./uploads/image.png"));
});
FAQএখানে কী ধরণের প্রশ্ন জিজ্ঞাসা করা উচিত তা একবার দেখে নিন । যাইহোক, আমি এবার আপনার প্রশ্নের উত্তর দেব।