node express ect multerでファイルアップロード処理を作成してみました。
ちなみに、ファイルアップロードは、HTML5のFile APIを使用して、PCからブラウザにファイルをドラッグアンドドロップで、実行するようにしました。
次のサイトを参考にしました。
https://github.com/expressjs/multer
http://soraxism.com/soraxism/blog/html5%E3%81%AEfile-api%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%80%81%E3%83%89%E3%83%A9%E3%83%83%E3%82%B0%EF%BC%86%E3%83%89%E3%83%AD%E3%83%83%E3%83%97%E3%81%A7%E3%83%95%E3%82%A1%E3%82%A4
プログラムソースは次の通りです。
=== app.js ===
メインプログラムですね。
"/"のパスの処理が呼ばれたら、ファイルアップロード入力フォームを表示します。
(開発環境だと、http://localhost:3000/ に該当します。)
"/up"のパスの処理が呼ばれたら、ファイルアップロード処理を行っています。
(開発環境だと、http://localhost:3000/up に該当します。)
そして、アップロードされたファイルの属性をコンソールに出力させてます。
var multer = require('multer');
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var app = express();
var upload = multer({
dest: __dirname + '/public/uploads/'
});
// ECT view engine setup
var ECT = require('ect');
var ectRenderer = ECT({ watch: true, root: __dirname + '/views', ext: '.ect'});
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ect');
app.engine('ect', ectRenderer.render);
// routes setup
var routes = require('./routes/index');
app.use('/', routes);
app.post('/up', upload.single('upFile'), function (req, res, next) {
for (var item in req.file) {
console.log(item + ":" + req.file[item]);
}
res.render('index');
});
// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// error handlers
// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: err
});
});
}
// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: {}
});
});
module.exports = app;
=== index.js ===
ファイルアップロード入力フォーム(index.ect)表示を促しています。
ただ、それだけです。
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index');
});
module.exports = router;
=== index.ect ===
ファイルアップロードの入力フォームです。
<% extend 'layout' %>
<div id="drag-area" style="background-color: lightgrey; text-align: center;">
アップロードするファイルをドロップ<br />
または<br />
<div class="btn-group">
<input name="upFile" style="display: none;" type="file" />
<button id="btn">ファイルを選択</button>
</div>
</div>
<% block 'footer-info' : %>
<div class="right">
page: upload</div>
<script>
$(function(){
$('#drag-area').bind('drop', function(e){
e.preventDefault();
var files = e.originalEvent.dataTransfer.files;
upload(files);
}).bind('dragenter', function(){
return false;
}).bind('dragover', function(){
return false;
});
$('#btn').click(function() {
$('input[type="file"]').click();
});
$('input[type="file"]').change(function(){
var files = this.files;
upload(files);
});
});
function upload(files) {
if (files == null || files.length == 0) {
return;
}
var frm = new FormData();
frm.append("upFile", files[0]);
$.ajax({
url: 'http://' + location.host + '/up',
type: 'post',
data: frm,
processData: false,
contentType: false,
success: function(data) {
alert('ファイルがアップロードされました。');
}
});
}
</script>
<% end %>
package.json
{
"name": "upload",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"body-parser": "~1.13.2",
"cookie-parser": "~1.3.5",
"debug": "~2.2.0",
"express": "~4.13.1",
"jade": "~1.11.0",
"morgan": "~1.6.1",
"serve-favicon": "~2.3.0",
"ect": "~0.5.9"
}
}
なお、今回multerを使用していてハマったのが
上記のように、multerを変数に格納するのでなく、次のようにapp.useを使用するサンプルがググると見つかります。
app.use(multer({ dest: './upload/'}));
この通りに、コーディングして、動作させると次のエラーが発生しました。
TypeError: app.use() requires middleware functions
このエラーメッセーじをググると、stackoverflowに次の記事が見つかりました。
app.use…は使用できないみたいです。
そもそも、上記のmulterのgithubの使用方法に、app.use…は記載されてないですね。
