React+Nodejs+axiosで画像ファイルをアップロードする

Reactで開発をしているのですが、画像ファイルをNodejsサーバーにアップロードするにはどうするか。
結局は、Formを作成して、appendするのが一般的なようです(^^;
※これは「File upload with React & NodeJS」を参考にしました。

ディレクトリ構成

今回はこんなディレクトリ構成にします。

dev
 frontend —- React環境
 backend —- Nodejs環境
  images — 画像保存領域

フロント側(React)の構築

・React環境を構築します。
$ npx create-react-app frontend

・axiosをインストールします。
$ npm install axios –save

・App.jsを書き換えます。

・起動します。
$ npm start

画像を選択するとこんな感じ。。

サーバー側(Nodejs)の構築

・サーバー環境を構築します。
$ npm install express cors multer

・app.jsを書き換えます。

・起動します。
$ node app.js

確認します

ファイルアップロードしてみてください(^^)

Follow me!

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA