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で追加しておく
動作確認
- postmanで http://localhost:3000/api/upload に対してファイルをアップしてみる。コンソールでアップされた情報が確認できます
{ 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
次回はフロントエンドを作ります