この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
はじめに
こんにちは。モバイルアプリサービス部の平屋です。
本記事では Node.js + express + Multer を使用して (簡易的な) ファイルアップロード API を作成する手順を紹介していきます。
要件など
- POST multipart/form-data リクエストを受け付ける
- API はモバイルアプリから使用する
- モバイルアプリの動作検証が目的なので、簡単に作れそうな方法が良い
検証環境
- macOS 10.12.3 (16D32)
- Node.js v6.10.0
- nvm 0.33.1
- express 4.14.1
- Multer 1.3.0
目次
- 1.Node.js をインストール
- 2.express-generator をインストール
- 3.アプリケーション作成
- 4.パッケージをインストール
- 5.Multer を追加
- 6.routes/index.js を修正
- 7.動作確認
1. Node.js をインストール
任意の方法で Node.js をインストールします。
- A. 公式サイトからインストーラーをダウンロードして実行する
- B. nvm (Node Version Manager) や nodebrew などのツールを使用してインストールする
2. express-generator をインストール
express は Node.js 向けの Web フレームワークで、express-generator は express アプリケーション(express を使用した Node.js アプリケーション) のジェネレータです。
次のコマンドを使用して、express-generator をインストールします。
$ npm install express-generator -g
/Users/hirayashingo/.nvm/versions/node/v6.10.0/bin/express -> /Users/hirayashingo/.nvm/versions/node/v6.10.0/lib/node_modules/express-generator/bin/express
/Users/hirayashingo/.nvm/versions/node/v6.10.0/lib
└─┬ express-generator@4.14.1
├─┬ commander@2.9.0
│ └── graceful-readlink@1.0.1
├─┬ mkdirp@0.5.1
│ └── minimist@0.0.8
└── sorted-object@2.0.1
3. アプリケーション作成
任意のディレクトリに移動し、express <アプリケーション名>
コマンドを使用して express アプリケーションの雛形を作成します。
$ express uploader
warning: the default view engine will not be jade in future releases
warning: use `--view=jade' or `--help' for additional options
create : uploader
create : uploader/package.json
create : uploader/app.js
create : uploader/views
create : uploader/views/index.jade
create : uploader/views/layout.jade
create : uploader/views/error.jade
create : uploader/public
create : uploader/public/stylesheets
create : uploader/public/stylesheets/style.css
create : uploader/routes
create : uploader/routes/index.js
create : uploader/routes/users.js
create : uploader/bin
create : uploader/bin/www
install dependencies:
$ cd uploader && npm install
run the app:
$ DEBUG=uploader:* npm start
create : uploader/public/images
create : uploader/public/javascripts
4. パッケージをインストール
手順 3 を行なった段階では、アプリケーション実行のために必要なパッケージはインストールされていません。
npm install
コマンドを使用してパッケージをインストールします。npm は Node.js のパッケージを管理するためのツールで、Node.js をインストールすると一緒にインストールされます。
$ cd uploader
$ npm install
コマンドを実行すると、手順 3 で生成された package.json 内に記述されたパッケージが、<アプリケーションディレクトリ>/node_modules
の中にインストールされます。
$ ls node_modules
accepts content-type graceful-readlink mkdirp setprototypeof
acorn cookie http-errors morgan source-map
...
この時点での package.json は以下のようになっています。
{
"name": "uploader",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"body-parser": "~1.16.0",
"cookie-parser": "~1.4.3",
"debug": "~2.6.0",
"express": "~4.14.1",
"jade": "~1.11.0",
"morgan": "~1.7.0",
"serve-favicon": "~2.3.2"
}
}
5. Multer を追加
Multer は multipart/form-data 形式のリクエストを扱うための Node.js ミドルウェアです。
以下のコマンドを実行すると、Multer のインストールと package.json への追記が行われます。
$ npm install --save multer
package.json の dependencies の中に multer が追加されました。
{
...
"dependencies": {
...
"multer": "^1.3.0",
...
}
}
6. routes/index.js を修正
routes ディレクトリ内の index.js を修正して、POST リクエストを受け付けられるようにします。
以下のように、5-16 行目と 25-27 行目を追加します。
var express = require('express');
var router = express.Router();
// 追加 1
var multer = require('multer');
var storage = multer.diskStorage({
// ファイルの保存先を指定
destination: function (req, file, cb) {
cb(null, '')
},
// ファイル名を指定(オリジナルのファイル名を指定)
filename: function (req, file, cb) {
cb(null, file.originalname)
}
})
var upload = multer({ storage: storage })
//
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
// 追加 2
router.post('/', upload.single('file'), function(req, res) {
res.json({ 'result': 'success!' });
});
//
module.exports = router;
5-16 行目では、Multer のロード/作成、保存先/ファイル名の指定を行なっています。アップロードされたファイルはプロジェクトのルートディレクトリに保存されます。
また 25-27 行目は、以下を満たすリクエストに対して応答し、固定の json を返すコードです。
- ルート (/) に対する POST リクエスト
- name に「file」を指定したファイルのアップロード
7. 動作確認
アプリケーションを実行
以下のコマンドを実行して express アプリケーションを実行します。Web サーバーが起動し、ポート 3000 でリクエストを受け付けるようになります。
$ npm start
> uploader@0.0.0 start /Users/hirayashingo/Projects/uploader
> node ./bin/www
ブラウザで http:<Web サーバーを起動しているマシンのIPアドレス>:3000/
にアクセスすると、以下のようなページが表示されます。
iOS アプリからファイルをアップロードする
iOS アプリの場合、以下のような実装でファイルをアップロードできます。
iOS + Swift + Alamofire
func upload() {
let path = Bundle.main.path(forResource: "image", ofType: "jpg")
let fileURL = URL.init(fileURLWithPath: path!)
Alamofire.upload(
multipartFormData: { multipartFormData in
multipartFormData.append(fileURL, withName: "file")
},
to: "http://192.168.0.11:3000/",
encodingCompletion: { encodingResult in
switch encodingResult {
case .success(let upload, _, _):
upload.responseJSON { response in
debugPrint(response)
}
case .failure(let encodingError):
print(encodingError)
}
}
)
}
iOS + Objective-C + AFNetworking
- (void)upload
{
NSString *path = [[NSBundle mainBundle] pathForResource:@"image" ofType:@"jpg"];
NSURL *fileURL = [NSURL fileURLWithPath:path];
AFHTTPSessionManager *manager = [AFHTTPSessionManager manager];
[manager POST:@"http://192.168.0.11:3000" parameters:nil constructingBodyWithBlock:^(id<AFMultipartFormData> formData) {
[formData appendPartWithFileURL:fileURL
name:@"file"
error:nil];
} progress:nil success:^(NSURLSessionTask *task, id responseObject) {
NSLog(@"success");
} failure:^(NSURLSessionTask *task, NSError *error) {
NSLog(@"error:%@", error.localizedDescription);
}];
}
動作結果
iOS アプリからアップロード操作を行い、express アプリケーションのルートディレクトリにファイルがアップロードされることを確認できました。
さいごに
本記事では Node.js + express + Multer を使用してファイルアップロード API を作成する手順を紹介しました。
アップロードを受け付ける機能だけであれば本当に簡単に作れますね!
今回解説したサンプルアプリケーションは以下のリポジトリで公開しています。
参考資料
- Express - Node.js Web アプリケーション・フレームワーク
- expressjs/express: Fast, unopinionated, minimalist web framework for node.
- expressjs/generator: Express' application generator
- expressjs/multer: Node.js middleware for handling `multipart/form-data`.
- Node.js v0.11.11 Manual & Documentation
- Node.js - サーバー で ブラウザ や アプリ から アップロード された フォームデータ を受け取る - Multerを使う - 望月いちろうのREADME.md
- Node.js Express4-Multerでファイルアップロード - Qiita
- 「MEANスタックで始めるWebアプリ開発入門」最新記事一覧 - ITmedia Keywords