axiosでPOSTした複数のファイルをFlaskでcatchする

はじめに

はじめてQiitaに投稿します。
私もエンジニアの端くれとしてアウトプットはしておきたいなと思ったので投稿します。
個人的にWeb上で入力された複数のファイルをバックエンドで動いているFlask上にPOSTする際に
わからなかったところがあるので残しておこうと思います。
ちなみにフロントにはVue.jsを使用しています。

複数ファイルの入力をする

htmlで複数ファイルを入力するときはmultiple属性にmultipleを指定します。
このときに入力されたファイルをselectedFile関数でデータを保存しておきます。

<input @change="selectedFile" type="file" name="uploadFiles" multiple="multiple" />

selectedFile: function (e) {
    e.preventDefault()
    const files = e.target.files
    for (const file of files) {
        this.uploadFiles.push(file)
    }
}

ファイルをPOSTする

ファイルを選択したあとに下記の関数を使用します。
方法はファイルをPOSTするためにformdataにFileオブジェクトを格納してPOSTします。

submit: function () {
    const formData = new FormData()
    for (let i = 0; i < this.uploadFiles.length; i++) {
        // iの箇所の名前を使用して、ファイルを抽出する
        formData.append(i, this.uploadFiles[i])
    }
    const config = {
        headers: {
          'content-type': 'multipart/form-data'
        }
   }
   axios
    .post('/api/merge', formData, config)
    .then(function (response) {
        // response 処理
        // backendで編集したファイルを受け取る
        const blob = new Blob([response.data], { type: 'application/pdf' })
    })
}

Flaskでファイルをcatchする

POSTされたformDataはFlask側ではrequest.filesで呼び出すことができます。
このfilesはdictなのでitems()を使って複数のファイルを呼び出せます。

api.py

for key, file in request.files.items():
    # keyはformDataでappendした際につけた名前が取得される
    filepath = f"./tmp/{key}.pdf"
    # filepathにファイルを保存する
    file.save(filepath)

おわりに

Flaskでfileをcatchするときにinputタグのnmae属性を使用して取得することは書かれていたのですが、axiosで複数ファイルをPOSTした際のファイルの取得方法が見つからなかったので記載しました。
もともと文書を書くことが苦手なのですこしずつ書くことに慣れて行こうと思います。