Качване на файл с Node & React

За новите разработчици качването на файлове изглежда като сложна тема. Въпреки това, за едно несложно приложение (което означава, че няма да се справите с тежка оптимизация на изображения/видео/файлове) качването на файлове не е нищо повече от копиране на файлове от едно място на друго. Експресната рамка за Node прави това лесно.

Стартиране на приложението

Ще започнем, като създадем интерфейса с помощта на create-react-app и бекенда с помощта на express-generator.

Frontend

npx create-react-app frontend
cd frontend
npm start

Бекенд

npm install express-generator -g
express backend
cd backend
npm install
npm start

Настройка на интерфейса

In frontend/src/index.js:

Ние просто ще изобразим основния <App/>компонент.

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

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

In 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;

In frontend/src/components/Main.jsx:

Следният компонент има формуляр с въвеждане на файл за качване и въвеждане на име на файл. При подаване ще бъде извикана функцията 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 и качете файл.