express.jsでファイルをGoogle Cloud Storageにアップロードする(1)

ChainZ(クリエイター)
いろいろやってます。

express.jsとgoogle cloud storage

express.js

node.jsプラットホームで定番のweb framework高い柔軟性と可用性を持ち、便利なmoduleも充実している。

Google Cloud Storage

Googleが提供した静的ファイルストーレージサービス。AWSのS3と似ている。Google APIやブラウザを通してファイル管理することができる。

サンプルアプリを作る

express.jsで複数のファイルがアップロードできるアプリを作ってみる。

必要なmodule

  • multer(簡単にファイルアップロードを実装できるexpress.jsのmodule)
  • googleapis(google api module)

npmでmoduleをインストールする

1
2
npm install multer --save
npm install googleapi --save

multerを導入する

app.jsを開いて、まずmulterモジュールをrequireする:

1
var multer = require('multer');

次に、app.use('/', routes); の直前に下記のコードを加える:

1
app.use(multer({}));

これで、アップロード機能の実装は完了。びっくりするぐらい簡単だが、プロダクションにはまだ細かい設定が必要。この記事では詳しく説明しないが、興味ある方はmulterの公式ドキュメントを参考してください:https://github.com/expressjs/multer

実際ファイルアップされたかどうかを確認したいので、multerにonFileUploadCompleteコールバックを設定して、アップされたファイルのパスをプリントする。

1
2
3
4
5
6
7
8
9
10
// ./app.js

app.use(multer({
  onFileUploadComplete: function(file, req, res) {
    console.log('UP完了:' + file.path);
  },

  // putSingleFilesInArrayをtureにすると、ファイル一個しか選択されても配列として扱う
  putSingleFilesInArray: true
}));

適当にrouteとテンプレートを作ってテストする:

route

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// ./app.js

// アップロードフォームを表示する
app.get('/upload', function(req, res) {
  res.render('upload');
});

// アップロード処理
app.post('/upload', function(req, res) {
  // multerはreqにfilesという変数を作成し、その中に格納されたのはフィールドネームをキーにしたオブジェクト
  // テンプレートにinputのnameが「files」になってるので、req.files.filesでファイルを取得する
  var files = req.files.files;
  res.render('uploaded', {files : files} );
});

テンプレート

1
2
3
4
5
6
7
8
// ./view/upload.jade

extends ./layout

block content
  form(action='/upload', method='POST',  enctype='multipart/form-data')
    input(type='file', name='files', multiple='')
    input(type='submit', value='あっぷ!')
1
2
3
4
5
6
7
// ./views/uploaded.jade

extends ./layout

block content
  for file in files
    p=file.path

npm install && npm startでプレビューしてみる:

うまくアップロードされたようで、もうちょっと完成度あげってみよう:アップした画像を表示させてみる。multerのchangeDestというオプションでファイルのアップロード先を変えることができる:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// ./app.js

app.use(multer({
  // アップロード先を./public/imagesにする
  changeDest: function(dest, req, res) {
    return __dirname + '/public/images';
  },
  onFileUploadComplete: function(file, req, res) {
    console.log('UP完了:' + file.path);
  },

  // putSingleFilesInArrayをtureにすると、ファイル一個しか選択されても配列として扱う
  putSingleFilesInArray: true
}));

テンプレートの方もちょっと調整する:

1
2
3
4
5
6
7
// ./views/uploaded.jade

extends ./layout

block content
  for file in files
    img(src='/images/' + file.name, style="width:200px;height:auto;margin-right:2px;float:left;border:1px solid #DFDFDF;")

もう一回プレビューしてみよう:

できた!これで、簡単なファイルアップロード機能が実装完了!

この記事では最低限のファイルアップロード機能を実装したが、実際にプロダクションに移行する時に、セキュリティ面を考慮しなければならない。

次はこのアプリでアップロードしたファイルをGoogle Cloud Storageに保存するという仕組みを作ってみる:http://befool.co.jp/blog/chainzhang/expressjs-file-upload-to-google-cloud-storage-2/