فراخوانی و آپلود انواع فایل ها در NODE.JS

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

برخی از ویژگی های برجسته این ماژول به صورت زیر لیست شده است :

Parser سریع، چند بخشی و بدون بافر دارد.
نوشتن فایل آپلود روی دیسک به صورت اتوماتیک انجام می شود.
حافظه کمی مصرف می کند
خطاها را به طور مناسب مدیریت کرده و رفع می کند.
برنامه را به خوبی می توان تست کرد.

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

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

ما برای دسترسی به ابزار Node.js باید ماژول های مورد نیاز Node را نصب کنیم. برای یادگیری و نصب nodejs میتوانید این دوره را مشاهده کنید و در ادامه ابزارهای مورد نیاز برای این پروژه را از این لینکدانلود کرده و نصب کنید.

مرحله 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');

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

۱. بارگذاری ماژول برای ایجاد وب سرور (HTTP)، فایل ورودی/خروجی(IO)، شناسایی درخواست پست، و خواندن فایل(formidable) و کپی کردن فایل روی سرور برای آپلود کامل (fs-extra) انجام می شود.
۲. ایجاد یک وب سرور با درخواست شنونده(listener).
۳. خواندن از مسیر مشخص شده و در صورت پیدا شدن، به درخواست پاسخ می دهد.
۴. اگر متد POST باشد فایل پردازش می شود.
۵. ایجاد فرم ورودی جدید از داده پست شده و Parse کردن داده دریافتی.
۶. زمانی که فایل دریافت شود و parsing کامل گردد، اطلاعات مسیر فایل موقت دریافت می شود. تابع بازگشتی parse ( ) شامل اطلاعاتی در مورد محل فایل آپلود شده می باشد.
۷. نام فایل آپلود شده را می خواند.
۸. فایل دریافتی را روی مسیر جدید کپی می کند.

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

مرحله 5

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