آپلود فایل با استفاده از Node.js

Node.js یکی از ساده ترین مکانیسم های آپلود فایل می باشد. در این مقاله می خواهیم یک ماژول آپلود فایل قدرتمند در Node.js را بررسی کنیم و ببینیم که چگونه می توان آن را در برنامه استفاده کرد.

آپلود کردن فایل یک از رایج ترین نیازمندی ها در یک برنامه وب می باشد. در Node.js می توانیم File upload را با استفاده از ماژول پرقدرت Felix Geisendoerfer بدست آوریم. استفاده از این ماژول بسیار ساده است و آپلود فایل های بزرگ را نیز پشتیبانی می کند. هنگامی که کاربر فایل را ارسال می کند. این ماژول فایل را در یک فضای مشخص روی هارد دیسک ذخیره می کند ، با این کار وقتی به عقب برگردیم می بینیم که مسیر فایل ذخیره شده است. برخی از ویژگی های برجسته این ماژول به صورت زیر لیست شده است:

Parser سریع، چند بخشی و بدون بافر دارد.

در صورتی که به یادگیری اصولی و حرفه ای این تکنولوژی قدرتمند علاقمند هستید میتوانید دوره کامل و جامع آموزش Node Js موجود در سایت تاپ لرن را مشاهده کنید .

نوشتن فایل آپلود روی دیسک به صورت اتوماتیک انجام می شود.

حافظه کمی مصرف می کند

خطاها را به طور مناسب مدیریت کرده و رفع می کند.

برنامه را به خوبی می توان تست کرد.

دیگر ماژول هایی که می توانیم در این نمونه برنامه استفاده کنیم، fs-extra می باشد که برای کپی کردن فایل های دریافتی روی سرور استفاده می شود. این ماژول شامل توابعی برای کپی کردن و نوشتن فایل می باشد.

پیاده سازی Node.js

ما برای دسترسی به ابزار Node.js باید ماژول های مورد نیاز Node را نصب کنیم. برای نصب Node.js این مقاله را مطالعه بفرمایید و در ادامه ابزارهای مورد نیاز برای این پروژه را از این لینک دانلود کرده و نصب کنید.

مرحله1: یک پوشه با نام VSCodeFileUpload روی هارد دیسک خود ایجاد کنید. VS را باز کرده و این فایل را با استفاده از Open در پروژه خود باز کنید.در این پوشه Scripts و Pages اضافه می شود.

مرحله 2: ما نیاز داریم از ماژول Formidable و Fs-Extra استفاده کنیم، که باید آنها را با intellisense برای Node.js نصب کنیم.

Command Prompt مربوط به Node.js را باز کنید ( اگر شما ابزار Node.js را نصب کرده باشید مورد ذکر شده در بالا در دسترس خواهد بود) و شما را به فولدر VSCodeFileUpload هدایت خواهد کرد. دستور زیر را برای نصب ماژول های مورد نیاز اجرا کنید.

npm install -g tsd

دستور بالا تعاریف TypeScript را برای اپلیکیشن نصب خواهد شد بنابراین می توانیم رفرنس های لازم را برای اپلیکیشن دریافت کنیم.

tsd node –action install

این دستور intellisense لازم را برای Node.js محیا خواهد کرد.

npm install formidable@latest

این دستور آخرین ماژول توانمند را نصب خواهد کرد. ما این ماژول را برای خواندن فایل های آپلود شده از فرم های ورودی پست استفاده می کند.

npm install fs-extra@latest

ما از ماژول بالا برای پردازش فایل های آپلود شده استفاده می کنیم و فایل های پست شده روی سرور را ذخیره می کنیم.

مرحله 3: در فولدر Pages یک فایل جدید اضافه می کنیم و نام آن را app.html قرار می دهیم. در این فایل صفحه HTML زیر را قرار می دهیم:

<html>
<head>
    <title>File Upload</title>
</head>
<body>
    <h1>Uploading Files to Server</h1>
    <form method="POST" enctype="multipart/form-data">
        <h4>Select File to Upload:</h4>
        <input type=file name=fileData />
        <br>
        <input type="submit" value="Upload">
    </form>
</body>
</html>

فایل HTML بالا توسط کلاینت جهت آپلود فایل استفاده خواهد شد. این صفحه شامل تگ <form> با متدی با نام POST می باشد.

مرحله 4: در پوشه scripts، یک فایل جدید با نام app.js اضافه می کنیم. این فایل شامل منطق لازم برای ایجاد وب سرور خواهد بود بنابراین می تواند درخواست های از نوع GET و SET را مدیریت کند. این فایل شامل منطق لازم برای آپلود و ذخیره فایل نیز می باشد.

//1.
var http = require('http');
var fs = require('fs');
var frd = require('formidable');
var filestore = require('fs-extra');
 
 
//2.
var server = http.createServer(function (req, resp) {
    //3.
    fs.readFile("../Pages/app.html", function (error, pgResp) {
 
        if (error) {
            resp.writeHead(404);
            resp.write('Contents you are looking are Not Found');
        } else {
            resp.writeHead(200, { 'Content-Type': 'text/html' });
            resp.write(pgResp);
        }
 
        resp.end();
    });
 
    //4.
    if (req.method.toLowerCase() == 'post') {
 
        //5.
 
        var fmr = new frd.IncomingForm();
        fmr.parse(req, function (err, fields, files) {
            resp.writeHead(200, { 'content-type': 'text/plain' });
 
        });
 
        fmr.on('end', function (fields, files) {
            //6.
            var tempPath = this.openedFiles[0].path;
 
            //7.
            var fileName = this.openedFiles[0].name;
 
            //8.       
            var newFileName = "../FileUpload_" + fileName;
 
            //9.
            filestore.copy(tempPath, newFileName, function (err) {
                if (err) {
                    console.error(err);
                } else {
                    console.log('File Uploaded');
                    resp.end('File Uploaded');
                }
            });
        });
 
        return;
    }
});
server.listen(5050);
console.log('Server Started.. on port 5050');

کد جاوا اسکریپت بالا مشخصات زیر را دارد. شماره ها با کامنت های بکارگرفته شده در کد منطبق است.

1. بارگذاری ماژول برای ایجاد وب سرور (HTTP)، فایل ورودی/خروجی(IO)، شناسایی درخواست پست، و خواندن فایل(formidable) و کپی کردن فایل روی سرور برای آپلود کامل (fs-extra) انجام می شود.

2. ایجاد یک وب سرور با درخواست شنونده(listener).

3. خواندن از مسیر مشخص شده و در صورت پیدا شدن، به درخواست پاسخ می دهد.

4. اگر متد POST باشد فایل پردازش می شود.

5. ایجاد فرم ورودی جدید از داده پست شده و Parse کردن داده دریافتی.

6. زمانی که فایل دریافت شود و parsing کامل گردد، اطلاعات مسیر فایل موقت دریافت می شود. تابع بازگشتی parse ( ) شامل اطلاعاتی در مورد محل فایل آپلود شده می باشد.

7. نام فایل آپلود شده را می خواند.

8. فایل دریافتی را روی مسیر جدید کپی می کند.

توجه: شما می توانید فایل آپلود شده را با استفاده از متد ( )createReadStream از ماژول fs باز کنید و عملیات یک سری از فایل ها را روی آن انجام دهید. برای مثال: Zipp کردن فایل.

مرحله 5: بر روی app.js راست کلیک کرده و گزینه Open را در Command Prompt انتخاب کنید، این پنجره command prompt را باز خواهد کرد و دستور زیر را اجرا کنید:

Node app

نتیجه به صورت زیر نمایش داده خواهد شد.

مرورگر خود را باز کرده(نوع مرورگر مهم نیست) و URL زیر را وارد کنید.

http://localhost:5050/Pages/app.html

با این کار نتیجه به صورت زیر خواهد شد:

بر روی Choose File کلیک کرده و یک فایل Text برای آپلود انتخاب کنید.زمانی که فایل انتخاب شد.بر روی دکمه Upload کلیک کنید. این مرحله نتیجه زیر را روی Node Command prompt نشان خواهد داد:

اگر شما فولدر جاری vscodeFileUpload را در Visual Studio کنترل کنید خواهید دید که فایل مورد نظر آپلود شده است.

فایل های ضمیمه

4196_uploadFileNodeJS.rar

مرجع تخصصی برنامه نویسان

انجمن تخصصی برنامه نویسان فارسی زبان

دوره های در حال ثبت نام آکادمی برنامه نویسان

آپلود فایل با استفاده از Node.js

فایل های ضمیمه

برنامه نویسان

اگر نیاز به یک مشاور در زمینه طراحی سایت ، برنامه نویسی و بازاریابی الکترونیکی دارید