【Express】画像を登録するAPIを実装する

はじめに

node.js(Expressを使用)したREST APIで、画像ファイルをアップロードする場合のサンプルを紹介します。

準備

パッケージのインストール

multerというパッケージをインストールします

npm install --save multer

https://www.npmjs.com/package/multer

実装

画像アップロードを行うrouterの上部でmulterをインポートします

const multer = require('multer')

Expressのルーティングの際にmulterのメソッドを噛ませます

 router.post('/', uploader.single('file'), (req, res) => { 

   ...

})

uploader関数の中身はこちら

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, env.UPLOADS)
  },
  filename: function (req, file, cb) {
    const uniqueSuffix = Date.now() + Math.round(Math.random() * 1E9)
    name = Common.makeFileName(uniqueSuffix,file.mimetype)
    cb(null, name)
  }
})
const uploader = multer({ storage: storage })

filenameのnameの部分を指定することで任意のファイル名で保存することができます。未指定の場合はランダムな名称で保存されます。

自分の場合は別ファイルに以下のような関数を用意し、アップロード元と同じ拡張子のファイル名で保存するようにしました

makeFileName: function (name,mime){
    let mimeType = mime.split("/")
    let rename = name + "." + mimeType[1]
    return rename
}

このようにすることで、本処理（router.post(‘/’, ～）の中身で

req.file.filename

の中にリネーム後の値が入ることになりますので、上記を変数に入れ、DBに書き込むといった形になります。

呼び出し元での定義方法

axiosでの例ですが、以下のように ‘content-type’: ‘multipart/form-data’ で送信する必要があります。

    const params = new FormData();
    params.append('canReceive', this.state.user.CAN_RECEIVE);
    params.append('userName', this.state.user.USERNAME);
    params.append('file', this.state.img);
    axios.post('/', params,{
      headers: {
        'content-type': 'multipart/form-data'
      }  
    })