برای توسعه دهندگان جدید، آپلود فایل همچون یک موضوع پیچیده به نظر می رسد. هرچند، برای یک اپلیکیشن غیر پیچیده، آپلود فایل هیچی غیر از کپی کردن فایل ها از یک محل به محل دیگر نیست. فریم ورک 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 :

 ما به سادگی کامپوننت <App/> اصلی را رندر می کنیم.

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

ReactDOM.render(<App />, document.getElementById('root'));

در frontend/src/App.jsx:

این کامپوننت ورودی است که عنوان و کامپوننت <Main/> را دارد.

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

const App = () => (
  <div>
    <h1>File Upload</h1>
    <Main />
  </div>
);

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() {
    return (
      <form onSubmit={this.handleUploadImage}>
        <div>
          <input ref={(ref) => { this.uploadInput = ref; }} type="file" />
        </div>
        <div>
          <input ref={(ref) => { this.fileName = ref; }} type="text" placeholder="Enter the desired name of file" />
        </div>
        <br />
        <div>
          <button>Upload</button>
        </div>
        <img src={this.state.imageURL} alt="img" />
      </form>
    );
  }
}

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(__dirname, 'views'));
app.set('view engine', 'jade');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, '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(__dirname + '/public'));


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

  imageFile.mv(`${__dirname}/public/${req.body.filename}.jpg`, function(err) {
    if (err) {
      return 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 می باشد که شما می توانید گام به گام با آن پیش بروید و فایل خود را آپلود کنید. آپلود کردن فایل یک فرایند بسیار آسان است که با کمی دقت انجام می شود. برای اینکار فقط کافی است این روندی که در بالا گفته شد را انجام دهید تا با استفاده از دو سرور فرانت اند و بک اند شاهد نتیجه کار خود باشید.