آپلود فایل با کمک فریمورک Node و React

برای گسترش دهندگان نو، آپلود فولدر همانند یک طراحی اپلیکیشن در مشهد زمینه بغرنج به حیث می‌رسد. آپلود پوشه با امداد Node و React منجر راحتی بسط دهندگان شد‌ه‌است.

برای پیشرفت دهندگان نو، آپلود پوشه همانند یک مورد غامض به حیث میرسد. هرچند، برای یک نرم افزار غیر غامض، آپلود فولدر هیچی غیر از اسکن کردن فولدر ها از یک محل به محل دیگر وجود ندارد. کادر ورک Express عمل آپلود کردن فولدر را برای کادر ورک Node  آسوده نموده است. در پی شاهد یک دمو از آپلود پوشه اپلیکیشنی خواهید بود که ما میخواهیم بسازیم. شما با یاری این نوشته‌ی علمی به راحتی میتوانید به آپلود فولدر با امداد Node و React بپردازید.

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

Bootstrapping نرم افزار

در صدر با تشکیل داد فرانت اند آغاز میکنیم که از create-react-app به کارگیری می نماید و برای ایجاد کرد بک اند از express-generator به کار گیری می‌کنیم.

فرانت اند

npx create-react-app frontend
cd frontend
npm start
بک اند

npm install express-generator -g
express backend
cd backend
npm install
npm start
نصب فرانت اند

در frontend/src/index.js :

 ما به آسانی کامپوننت  مهم را رندر می‌کنیم.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(, document.getElementById('root'));
در frontend/src/App.jsx:

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

import React from 'react';
import Main from './components/Main';

const App = () => (

File Upload

);

export default App;
در frontend/src/comonents/Main.jsx:

کامپوننتی که به‌دنبال مهیا میباشد، یک هیبت با ورودی آپلود پوشه (file Upload input) و ورودی اسم پوشه (File name input) دارااست. به محض ارائه کردن، تابع  handleUploadImage فراخوانده می گردد. تابع شرایط imageURL تصویر آپلود گردیده را تغییر‌و تحول میدهد که تحت عنوان خصوصیت href در تگ تصویر در تحت آن مستعمل میباشد.

import React from 'react';

class Main extends React.Component {
constructor(props) {
super(props);

this.state = {
imageURL: '',
};

this.handleUploadImage = this.handleUploadImage.bind(this);
}

handleUploadImage(ev) {
ev.preventDefault();

const data = new FormData();
data.append('file', this.uploadInput.files[0]);
data.append('filename', this.fileName.value);

fetch('http://localhost:8000/upload', {
method: 'POST',
body: data,
}).then((response) => {
response.json().then((body) => {
this.setState({ imageURL: `http://localhost:8000/${body.file}` });
});
});
}

render() {
retu (

 { this.uploadInput = ref; }} type="file" />

 { this.fileName = ref; }} type="text" placeholder="Enter the desired name of file" />

Upload

"img"

);
}
}

export default Main;
نصب بک اند

نصب بک اند با نصب پکیج CORS & express-fileupload شروع میشود و از nodemon برای مشاهده تغییرات تولید گردیده در پوشه به کار گیری میکنیم.

cd backend
npm install --save cors
npm install --save express-fileupload
npm install -g nodemon
nodemon app.js
پوشه app.js را در فولدر بک اند اصلاح فرمائید تا مانند ذیل به حیث برسد:

const express = require('express');
const path = require('path');
const favicon = require('serve-favicon');
const logger = require('morgan');
const cookieParser = require('cookie-parser');
const bodyParser = require('body-parser');
const fileUpload = require('express-fileupload');
const cors = require('cors');

const app = express();

// view engine setup
app.set('views', path.join(__diame, 'views'));
app.set('view engine', 'jade');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__diame, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(fileUpload());
app.use('/public', express.static(__diame + '/public'));

app.post('/upload', (req, res, next) => {
console.log(req);
let imageFile = req.files.file;

imageFile.mv(`${__diame}/public/${req.body.filename}.jpg`, function(err) {
if (err) {
retu res.status(500).send(err);
}

res.json({file: `public/${req.body.filename}.jpg`});
});

})

// catch 404 and forward to error handler
app.use(function(req, res, next) {
const err = new Error('Not Found');
err.status = 404;
next(err);
});

// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};

// render the error page
res.status(err.status || 500);
res.render('error');
});

app.listen(8000, () => {
console.log('8000');
});

module.exports = app;
بعد از آن به localhost:3000 نشانی دهید و یک فولدر را آپلود فرمایید.

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