Expressでシンプルなファイルアップロード

Expressをapiサーバーとして使おうとして、画像ファイルをクライアントからPOSTで送る時にハマりました。

bodyParserではなくmulterを使う

Expressの知識がなくてbodyParserがJSONにしか対応しないようになっていたことを知りませんでした。
そこでmulterというミドルウェアを使います。
https://github.com/expressjs/multer

multerでハマった

↓これにハマっていた
http://banseivlog.hatenablog.jp/entry/2016/07/29/191114

ですが、よくよく見てみたらREADMEにmulterの使い方ががっつり書いてあるんですね。
https://github.com/expressjs/multer#usage

サンプル

単純にファイルをアップロードするサンプルです。
https://github.com/SatoshiKawabata/express-upload-file

アップロードフォーム

フォームはviews/index.ejsです。

index.ejs

<form 
  method="POST"
  enctype="multipart/form-data"
  action="/upload">
  <input type="file" name="thumbnail"></input>
  <input type="submit"></input>
</form>

upload.js

multerを使っているのはroutes/upload.jsです。
ここでファイルを受け取れるようにしています。

upload.js

router.post('/', upload.fields([ { name: 'thumbnail' } ]), function(req, res, next) {
  console.log(req.files); // req.filesにアップロードされたデータが入ってきます。
}

アップロードされたreq.files.thumbnail[0]のプロパティ

{destination:"./uploads/"
encoding:"7bit"
fieldname:"thumbnail"
filename:"7df615fa5b9accdf22b9471ee26ecb70"
mimetype:"image/png"
originalname:"  test.png"
path:"uploads/7df615fa5b9accdf22b9471ee26ecb70"
size:178923