JavaScriptだけでWebサイト開発

node.js + Express + mongodb系 + React でサービスを作るメモ

React(create-react-app)とExpress(REST API)で画像アップ掲示板を作ってみる(1)

前回の続きです。

前回まではテキストのみを投稿する掲示板でしたが、画像もアップできるようにします。

作るもの

  • これまで作ってきた掲示板を拡張
  • フロントエンドはcreate-react-appで作成
  • バックエンドはExpress
  • 書き込みと同時に画像をアップロードできるようにする
  • 書き込み一覧に画像を表示する

0. これまで作ったファイル構成

kakikomi
  ├── kakiapi                     サーバー API
  │   ├── app.js
  │   ├── bin
  │   ├── node_modules
  │   ├── package-lock.json
  │   ├── package.json
  │   ├── public
  │   ├── routes
  │   └── views
  └── kakifront                   フロントエンド
      ├── README.md
      ├── build 
      ├── node_modules
      ├── package-lock.json
      ├── package.json
      ├── public
      └── src

作業は kakikomi/ 以下で行います

1. サーバーAPIにファイルのアップロード機能を追加する

Expressで標準的なmulterを使用します。作業はkakiapi/で行います。

$ cd kakiapi
$ npm install --save multer
+ multer@1.3.0
added 15 packages in 2.988s

アップロードされたファイルを格納する場所を作ります

$ mkdir public/uploads

app.jsに以下を追加

/////////////////////////
///  追加
/////////////////////////
var path = require('path');  // ファイルの拡張子を取得するのに使う
var multer  = require('multer');
// 格納場所と新しくつけるファイル名の定義
var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'public/uploads');
  },
  filename: function (req, file, cb) {
    cb(null, file.fieldname + '_' + Date.now() + path.extname(file.originalname));
  }
});
var upload = multer({ storage: storage });
// ルーティング
app.post('/api/upload', upload.single('image'), function (req, res, next) {
  delete req.file.buffer;
  console.log(req.file);
  res.send(req.file); // 取得した情報を返す
});
//////////////////////////

やったこと

  • multerのoptionにファイル保存場所と新しく付与するファイル名の定義をstorageに設定
  • filename は フィールド名+時刻+拡張子
  • レスポンスはアップされたファイルの情報をそのまま返す
  • mongooseのスキーマに filename フィールドを Stringで追加しておく

動作確認

{ fieldname: 'image',
  originalname: 'ほげのふぁいる.jpg',
  encoding: '7bit',
  mimetype: 'image/jpeg',
  destination: 'public/uploads',
  filename: 'image-1510280080562.jpgs',
  path: 'public/uploads/image-1510280080562.jpg',
  size: 20617 }
POST /api/upload 200 14.944 ms - 238
  • ファイル確認
$ ls -l public/uploads
total 48
-rw-r--r-- 1 ichibit staff  20617 11 10 11:14 image-1510280080562.jpg

次回はフロントエンドを作ります

©ichi-bit