HTMLからバイナリファイルをアップロードしたり、サーバからバイナリデータをダウンロードしてみます。

クライアント側として、HTMLのSubmitボタンを利用する方法と、Javascriptから送信する方法でやってみます。
サーバ側としては、Node.jsのSwagger-node(中身はExpress)のサーバの場合と、AWSのAPI Gateway＋Lambdaの場合を取り上げます。

毎度の通り、ソースコードは以下に上げておきました。

poruruba/fetch_laboratory
　https://github.com/poruruba/fetch_laboratory

バイナリファイルの送信

それでは、送信するクライアント側のWebページから見ていきます。
まずは従来からの、HTMLのSubmitボタンで送信する場合です。
HTMLは以下のような感じになります。

<formv-bind:action="base_url + '/upload'"method="post"enctype="multipart/form-data"><inputtype="file"name="upfile"accept="image/*"><inputtype="text"name="param"v-model="param_value"><inputtype="submit"name="submit"value="送信"></form>

（v-bindやらv-modelやら、Vueを使っていますが、感触はつかめると思います。）

methodとenctypeは、POST・multipart/form-dataを指定します。それにより、バイナリファイルだけでなく、他のテキストパラメータ(上記では、paramとsubmit)も一緒に送ることができます。
「ファイルを選択」ボタンがありますので、それを押下することでPCにあるファイルを指定することができ、「送信」ボタンでファイルとテキストパラメータがサーバに送信されます。

これで送られるのは以下の通りです。
・upfile：指定したファイル
・param：name=paramで指定したテキスト
・submit：name=submitのvalueである"送信”

これであれば、Javascriptの力を借りずに、送信できます。が、送信後、Webページが送信後のレスポンスの内容に遷移します。

次の、Javascriptから送信する場合は、画面は遷移しません。

とりあえずHTMLです。

<div><inputtype="file"accept="image/*"v-on:change="do_change"><inputtype="text"v-model="param_value"><buttonv-on:click="do_upload">do_upload</button></div>

送信を行うJavascriptは以下の通りです。

do_upload:function(){varparam={upfile:this.file,param:this.param_value,submit:this.submit_value,};do_post_formdata(this.base_url+"/upload",param).then(json=>{this.response=json;});},do_change:function(e){if(e.target.files.length>0){this.file=e.target.files[0];}},

送信のトリガは、v-on:click=”do_upload”と記載してある通り、do_upload()というメソッドです。
ただ、送信するファイルはこのときにはもう触れないので、「ファイルを選択」ボタンからファイルを指定したときにファイルを保持しておく必要があります。そのトリガメソッドがdo_change()のメソッドです。
あとは、POST送信の多面い、以下の関数を呼ぶだけです。

functiondo_post_formdata(url,params){varbody=Object.entries(params).reduce((l,[k,v])=>{l.append(k,v);returnl;},newFormData());returnfetch(newURL(url).toString(),{method:'POST',body:body,}).then((response)=>{if(!response.ok)throw'status is not 200';returnresponse.json();});}

詳細は、以下で説明していますので、割愛します。

　fetchの呼び出し @Javascript & Node.js 実験室

ファイルを受け取るサーバの配置

それではさっそく、ファイルを受信するサーバを立ち上げます。
サーバとして、Swagger-nodeサーバを採用しています。
詳細は以下をご参照ください。

　SwaggerでLambdaのデバッグ環境を作る(1)

Swagger定義ファイルは以下のような定義になります。

/upload:post:x-swagger-router-controller:routingoperationId:uploadconsumes:-multipart/form-dataparameters:-in:formDataname:upfiletype:fileresponses:200:description:Successschema:$ref:"#/definitions/CommonResponse"

consumesとしてmultipart/form-dataを指定しています。
また、parametersとして、ファイルが指定されているupfileの指定を記載しています。paramやsubmitもあるのですが、それらの指定は必須ではありませんが、type=fileの指定は必須のようです。

これで、ファイルおよびパラメータを送信すると、Expressのフレームワークでおなじみのreqとresにおいて、req.bodyにパラメータが、req.filesにファイルが入ってきます。

req.body = {
 param:"param_1"
 submit:"送信"
}

※paramの内容は、Webページで指定したテキストです。

req.files = {
upfile: [
 {
  buffer: ファイルの内容(Buffer型),
  encoding: “7bit”,
  fieldname: “upfile”,
  mimetype: “image/png”,
  originalname: “test.png”,
  size: 424,
 }
 ]
}

※bufferやmimetype、originalname、sizeは、選択したファイルによって変わります。

ソースコードは、api\controllers\upload\index.jsにあるのですが、AWSのLambdaとの互換性を考慮して、api\controllers\routing.jsやfunction.jsを間に挟んでちょこちょこ処理が入っています。具体的には、event.bodyをJSONパースするとパラメータを取得し、event.filesでファイルが取得できるようにしています。

さっそく、Webページから、ファイルを選択して「送信」ボタンまたは「do_upload」ボタンを押してみます。

AWSのAPI Gateway+Lambdaに配置

今度は、このサーバをローカルではなく、AWS上に構築してみます。
ソースコードは、api\controllers\upload\index.jsをほぼそのまま使いますが、手を入れるところがあります。

API Gatewayでは、Swagger-nodeのような、multipart/form-dataを自動的にはパースしてくれませんので自前で用意する必要があります。
以下のnpmモジュールを使わせていただきました。

fransismeynard/lambda-multipart-parse
　https://github.com/francismeynard/lambda-multipart-parser

これを使ってパースするユーティリティを作っておきました。

'use strict';asyncfunctionparse(parser,event){varbody=awaitparser.parse(event);if(body.files){event.files={};for(vari=0;i<body.files.length;i++){varfile={};file.buffer=body.files[i].content;file.encoding=body.files[i].encoding;file.fieldname=body.files[i].fieldname;file.mimetype=body.files[i].contentType;file.originalname=body.files[i].filename;file.size=body.files[i].content.length;event.files[file.fieldname]=[file];}deletebody.files;}returnbody;}module.exports={parse,};

まだ解析されていないmultipart-form-dataは、event.bodyに入っており、解析には先ほどのnpmモジュールであるlambda-multipart-parserを使います。
解析すると、クライアント側から受け取ったファイルとパラメータが取得されます。
そして、ファイルをevent.filesにExpressと同じフォーマットで格納しなおし、それ以外のパラメータはreturnで返すようにしています。

それでは、Lambdaを作っていきます。
例えば、関数名として「upload_labo」としてみました。Node.jsはv10を選択しました。

以上で、とりあえず空のLambdaが出来上がりました。

次に、ソースコードファイルをアップロードします。Web管理コンソールからエディットしてもよいのですが、npmモジュールであるlambda-multipart-parserをアップしないといけないのと、すでにベースとなるindex.jsとその他ユーティリティファイルが手元にあるため、ZIPに固めてアップします。

以下のフォルダに移動し、ZIP対象ファイルを集めます。いくつかユーティリティファイルも含めています。

cd api\controllers\upload
npm init -y
npm install lambda-multipart-parser
mkdir helpers
cp ....\helpers\response.js helpers
cp ....\helpers\multipart.js helpers
cp ....\helpers\binresponse.js helpers

そして、upload配下のファイルをZIPに固めます。npm installで生成されたnode_modulesフォルダも含めます。

固めたZIPを、先ほど作成したLambdaにアップロードします。
コードのエントリタイプのところで.zipファイルをアップロード を選択すると出てくる「アップロード」ボタンを押下してZIPファイルを選択します。

次に、ソースをちょっといじります。以下の部分のコメントを外します。

// Lambda＋API Gatewayの場合に必要
const { URLSearchParams } = require('url');
const multipart_parser = require('lambda-multipart-parser');
const Multipart = require(HELPER_BASE + 'multipart');

そして、上記有効化したMultipartを使うように切り替えます。

  if( event.path == '/upload' ){
    // Lambda＋API Gatewayの場合はこちら
    var body = await Multipart.parse(multipart_parser, event);
    // swagger_nodeの場合はこちら
    //var body = JSON.parse(event.body);

    console.log('body', body);
    console.log('files', event.files);

    var response = {
      path : event.path,
      param: {
        param: body.param,
        submit: body.submit,
        upfile: event.files['upfile'][0].originalname,
      }
    };
    return new Response(response);
  }

そして、環境変数を追加します。

　HELPER_BASE ： ./helpers/

次は、API Gatewayです。
新規作成でもよいのですが、以前、fetch実験室で作ったAPIにアップロード用のエンドポイントを追加します。

　リソース名：upload
　メソッド：POST
　Lambda関数：先ほど作成したupload_labo

CORSやLambdaプロキシ統合の使用は、忘れずに有効化しましょう。
最後に、APIのデプロイをしておきます。
デプロイが完了すると、URLの呼び出しが表示されたと思いますので、それをメモリます。

クライアント向けのstart.jsのbase_urlをAPI Gatewayで表示されたURLの呼び出しのURLに変更することで、アップロード先がAPI Gatewayに代わります。
やってみましょう。
（。。。★ここで発覚！日本語のテキストが文字化けしてしまいました。原因不明です。。。）

バイナリファイルのダウンロード

最後に、バイナリファイルをダウンロードしてみます。
ダウンロードのトリガは、単純にGET呼び出しとしましょう。
HTMLに以下のリンクを作ります。

<av-bind:href="base_url + '/download?param=1'">取得</a>

downloadというエンドポイントにGET呼び出しです。

Swagger定義ファイルはこんな感じです。

/download:get:x-swagger-router-controller:routingoperationId:uploadparameters:-in:queryname:paramtype:stringresponses:200:description:Successschema:type:file

GETを受け付けてバイナリをダウンロードする実装は、api\controllers\upload\index.jsに追記しました。以下の部分です。

constBinResponse=require(HELPER_BASE+'binresponse');・・・if(event.path=='/download'){varbinary=[];for(vari=0;i<256;i++)binary[i]=i;varresponse=newBinResponse("application/octet-stream",Buffer.from(binary));response.set_filename("output.bin");returnresponse;}

application/octet-streamというMimetypeで、256バイトのデータです。

レスポンスインスタンスの生成用に、binresponse.jsというユーティリティを作ってみました。

classBinResponse{constructor(content_type,context){this.statusCode=200;this.headers={'Access-Control-Allow-Origin':'*','Cache-Control':'no-cache','Content-Type':content_type};this.isBase64Encoded=true;if(context)this.set_body(context);elsethis.body="";}set_filename(fname){this.headers['Content-Disposition']='attachment; filename="'+fname+'"';returnthis;}set_error(error){this.body=JSON.stringify({"err":error});returnthis;}set_body(content){this.body=content.toString('base64');returnthis;}get_body(){returnBuffer.from(this.body,'base64');}}module.exports=BinResponse;

ここでは詳しく書いていませんが、binresponse.jsでBase64エンコードし、routing.jsでBase64デコードしています。

あとは、WebページからGETを呼び出すとファイル保存のダイアログが表示されば成功です。

AWSへの配置

/uploadエンドポイントと同様に、API Gatewayから、fetch実験室で作ったAPIに/downloadのリソースを作成し、GETメソッドを追加し、それにupload_laboのLambda関数に割り当てます。

１つ追加で実施しておくことがあります。
LambdaからバイナリデータをAPI Gatewayに渡す際には、Base64エンコードをして渡す必要があるのですが、何もしないとBase64エンコードされたままクライアントに渡してしまいます。
そこで、特定のMimeTypeの場合は、Base64エンコードをデコードしてからクライアントに渡すように設定する必要があります。

　API Gateway→ 対象のAPI→設定

そこに、バイナリメディアタイプ というのがあるので、そこにBase64デコードしてほしいメディアタイプを指定します。今回は、application/octet-streamで返そうと思っています。
★が、なぜかうまく一致が働かかなかったので、全メディアタイプをデコード対象としました。「 ＊/＊ 」と入力し、「変更の保存」ボタンを押下します。
保存後、APIのデプロイをして更新しておきます。

全部を対象としても、レスポンスインスタンスで、isBase64Encodedがtrueになっていなければ、勝手にデコードはされません。
さきほどの、binresponse.jsで見た通り、BinResponseを使うと、自動的にisBase64Encodedをtrueとしていますので、Base64エンコード・デコードしたい時はこれを使うようにします。

これで、start.jsの呼び出し先base_urlをAPI Gatewayに変えても、同じようにバイナリデータがダウンロードできたかと思います。

以上