localhostからAPIGateway→Lambdaを経由してS3に画像をアップロードしたい

Question

現在、Vueでサーバーレスアプリケーションを作成しています。
フロント側からaxiosでapigatewayにリクエストを投げてそれをlambdaに渡してS3に画像をアップロードしようとしています。

何故経由させているかというと、データベースに画像の情報を登録するためです。
なので、もしかするとS3に直接アップロードしてアップロードトリガーで処理することができるかもしれません。
とりあえずはおいておきます。
フロントエンドのリクエストの部分が以下になります。

  methods: {
    onSubmit () {
      let data = new FormData()
      data.append('title', 'test')

      for (let i = 0; i < this.files.length; i++) {
        data.append('image', this.files[i])
      }

      let config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }

      axios.post('apigatewayUrl', data, config)
        .then((response) => {
          console.log(response.data)
        })
        .catch((error) => {
          console.log(error)
        })
    },

lambda側は以下です。

import json
import boto3
import base64


def lambda_handler(event, context):
    # print(json.dumps(event))

    try:
        s3 = boto3.resource('s3')
        bucket = s3.Bucket('backetname')
        imageBody = base64.b64decode(event['body'])
        key = "test/cat.png"
        bucket.put_object(
            Body = imageBody,
            Key = key
        )
        print('success!')
        res = {
            "isBase64Encoded": True,
            "statusCode": 200,
            "headers": {},
            "body": json.dumps({"status": 1})
        }
        return res

    except Exception as e:
        res = {
            "isBase64Encoded": True,
            "statusCode": 200,
            "headers": {},
            "body": json.dumps({"message": str(e)})
        }
        return res

実際にリクエストを投げると以下のようなエラーが返ってきます

string argument should contain only ascii characters

調べてみるとJavascriptのFormDataは独特なパースが必要というのを知りました。
現在、lambdaはpython3を使っていますが、パースする方法が見つかりませんでした。
そもそもFormDataオブジェクトを使用して画像をpostしている例がほとんどなく、
他の方は一体どのように画像をアップロードしているのだろうかと甚だ疑問です。
localhost→apigateway→lambda→S3はちゃんと繋がっているのは確認済みです。

ここで先ほどの余談に戻るのですが、APIGatewayとlambdaを経由させるのは一般的ではないのでしょうか？
S3にトリガーを設定しておいて、そのトリガーでデータベースを更新するのが一般的でしょうか？
教えて欲しいことをまとめると、

1. FormDataでpostしたデータをlambda(python)側でパースして保存する方法はあるか
2. そもそもFormDataを用いない方法があってそっちの方が便利なのか
3. そもそもPythonという選択が間違っているのか
4. apigateway→lambdaを経由させる必要はなく、S3にトリガーを仕込むのが普通か？また、その時のデータベースに登録するのに必要な情報等は一緒に送ることができるのか
5. 一般的なサーバーレスアプリケーションに置ける画像アップロードの仕組みはどれがメジャーなのか

よろしくお願いします。

Answer 1

base64で送信しては？

1. JavaScriptで画像をBase64エンコード、FormDataでなくJSONで送信
2. python側で受け取ったBase64データをデコード、画像に戻してS3に保存

参考
https://qiita.com/mserizawa/items/7f1b9e5077fd3a9d336b

Comments

[_Victorique__]

回答ありがとうございます。
JS(フロント)でbase64にエンコード可能なのでしょうか？
以前探したのですが見つかりませんでした。

[退会済みユーザー]

可能です。
ライブラリも何も要りません。
https://am-yu.net/2012/01/08/filedata_base64/

[_Victorique__]

挑戦してみましたが超簡単にできました！！
サーバーレスでやるならFormDataよりもbase64にして飛ばした方が楽ですね！
ありがとうございました！

[退会済みユーザー]

良かったです。

Answer 2

FormDataでpostしたデータをlambda(python)側でパースして保存する方法はあるか

あります．
必要ならコード描きますが，どうしますか？

そもそもFormDataを用いない方法があってそっちの方が便利なのか

エンコードしてjsonで受け取るとういうのが一般的ではあります．

そもそもPythonという選択が間違っているのか

Pythonが間違っているわけではないです．言語は各社，各人の最適なもので大丈夫です．

apigateway→lambdaを経由させる必要はなく、S3にトリガーを仕込むのが普通か？また、その時のデータベースに登録するのに必要な情報等は一緒に送ることができるのか

普通かどうかはわかりませんが，，，　s3に直接PutするよりもAPIGatewayを通したほうがセキュリティ上安全かと思います．

一般的なサーバーレスアプリケーションに置ける画像アップロードの仕組みはどれがメジャーなのか

今回ご質問いただいている環境は，メジャーでよく使われる構成ですね．

APIGatewayの設定でimageは許可されていますか？

下記を参照してみてもうまくいかないですかね．．．
https://dev.classmethod.jp/cloud/aws/sugano-013-api-gateway/
https://qiita.com/acro5piano/items/125aeede85bc0448b600

Comments

[_Victorique__]

回答ありがとうございます。
是非コードを見てみたいです！
こちらでもpythonでパースを試してみましたがファイル名は取れますが肝心の画像データが空になってしまいます（画像データ自体はちゃんとlambdaに届いています。）
imageの許可してあります。構成も載せますね

[_Victorique__]

ちなみにcontent-typeはimage/*ではなくmultipart/form-dataでpostしていますので画像とは関係ないと思うのですがどうでしょうか？

[DaichiYasuda]

> ちなみにcontent-typeはimage/*ではなくmultipart/form-dataでpostしていますので画像とは関係ないと思うのですがどうでしょうか？

私の環境では，image/* もmultipart/form-data許可していました．
ドキュメントがなかなか見当たらず，手当たり次第に設定していましたね

[DaichiYasuda]

コードはちょっと待ってくださいね．
明日ぐらいには出来るかと．

lambdaでflaskでAPI作って，ゴニョゴニョやってたはずです

[_Victorique__]

なるほどです。確かに全部設定しておいたほうが間違いなさそうですね。
ありがとうございます！flaskってlambdaで使えるんですか？
サーバーレスで実現できるならめっちゃ便利ですね！