例えば画像を Node-RED へアップロードしたい、とかの時です。
下のフロー図は、ファイルを送信できるアップロードページと、送られてきたファイルを鯖上に保存するフローのサンプルです。
フローの JSON コード貼ると化けちゃうブログなので、下記の説明を読んで各自で自作してくださいｗ
ただし環境によっては file ノード（ファイル作成ノード）がない場合もあります。（IBM Cloud のボイラーテンプレートで用意された Node-RED とか）
ただし環境によっては file ノード（ファイル作成ノード）がない場合もあります。（IBM Cloud のボイラーテンプレートで用意された Node-RED とか）
その場合は file ノードの代わりに、データベースなどへの保存の処理を行う必要があるわけですが、それはまた別のお話……
では、個々のノードについてザッと説明します。
アップロードページのフロー
まずは動作確認のためにも、ファイルをアップロードするためのページを用意します。
「[get] /upload」http 入力ノード
Node-RED 鯖の /upload に GET でアクセス（単にブラウザでアクセス）されたときのフローがここからスタート。
「HTML」template ノード
ここでファイルをアップロードできる HTML を msg.payload にぶち込みます。
HTML はこんな感じ。
<!doctype html>ちゃんと form 要素の method属性は post に、enctype 属性は multipart/form-data に設定しましょう。
<html>
<head>
<meta charset="utf-8">
<title>アップロード</title>
</head>
<body>
<form action="/upload" method="post" enctype="multipart/form-data">
<input name="file" type="file" id="file"><br>
<input type="submit" value="アップロード">
</form>
</body>
</html>
http 出力ノード
上記の HTML をここで返します。
それにより無事、アクセスしてきたブラウザにはアップロードページが表示されます。
特に何も設定しなくてもデフォで Content-Type: text/html として返してくれるので楽ちん。
ファイルを受け取ったときのフロー
こっからが本題。
先のページからファイルがアップされた時のフローです。
「[post] /upload」http 入力ノード
アップロードページと同じ URL だけど、POST だった場合はこっちがスタートします。
ファイルがアップされるはずなので、ノード編集画面の「ファイルのアップロード」にチェックを入れましょう。
チェック入れておかないと msg.payload にバイナリバッファが入っちゃって意味不明になります。
入れておくことでファイルは msg.req.files に格納され、msg.payload には HTML の form の各値が格納された状態になります。
「処理」function ノード
ここでは簡単なエラーチェックをしつつ、応答のフローとファイル保存のフローに分けています。
出力数は 2 にして、return の [0] は応答のフローへ、return の [1] はファイル保存のフローへ分かれるようにしました。
コードは以下の通り。
コードは以下の通り。
let files = msg.req.files;まず、msg.req.files の数を見て、ちゃんとファイルが含まれているかをチェックしています。
if (files.length === 0) {
msg.payload = "ファイルが添付されてないよ";
return [msg, null];
}
msg.payload = "たぶん保存したよ";
//
let msg2 = {};
msg2.payload = files[0].buffer;
msg2.filename = "/home/user/" + files[0].originalname;
return [msg, msg2];
もしファイルが含まれていなかったら、ファイル保存のフローへは null を返すことで、フローが進まないようにしています。
他にも必要であれば msg.req.files[0].mimetype などを確認して、想定外のファイル形式を弾いたりしても良いでしょう。
で、問題がなかった場合、新たにファイル保存フロー用のオブジェクト msg2 をこしらえます。
そして次の「ファイル作成」ノードのために、msg2.payload にファイルのバイナリバッファを入れます。
あと、保存先とファイル名もここで設定してしまいます。
サンプルでは鯖上の /home/user/ へ元のファイル名のまま保存するようにしました。
「HTML」template ノード その2
応答フローの template ノードです。
ここでは応答用の HTML を作成して msg.payload に入れています。
予め先の「処理」function ノードで msg.payload にはメッセージが入れられているので、Mustache タグを利用して payload の内容を HTML に差し込んでいます。
↓こんな感じ。
ここでは応答用の HTML を作成して msg.payload に入れています。
↓こんな感じ。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>結果</title>
</head>
<body>
<p>{{payload}}</p>
</body>
</html>
ヒゲ便利ｗ
http 出力ノード
応答フローでも先の http 出力ノードを再利用。えこえこ。
「ファイル作成」file ノード
鯖上にファイルを保存します。
ノード編集画面で「動作」を「ファイルを上書き」にして「メッセージの入力のたびに改行を追加」のチェックは外しておきましょう。
「ファイル名」は先の「処理」function ノードで設定済みなので、ここでは空にしておきます。
（以前は何か入力されていても、msg 側が優先されてたけど、最近 msg 側で設定済みなのにノード編集画面でも何か入力されてると警告されるようになったっぽぃ）
以上、個々のノードの説明でした。
実際に /upload へブラウザでアクセスしてみて、動作を確認してみましょう！
そして何か間違えている場合、またはもっといい方法がある場合は教えてくださいｗ
おしまーいヽ(=´▽`=)ﾉ
0 件のコメント:
コメントを投稿