S3の画像データを無理やりBlob型に変換する方法

なにこれ

S3の画像データをBlob型にしたい！っていう珍しい状況になった時の解決策です。
Vue(Nuxt)で下記のように'Content-Type': 'multipart/form-data'で送りたい！って時に遭遇する可能性が高そうです。

test.js

        const response = await this.$axios.put(`/hoges/${this.hoge.id}`, req, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        })

どうやるか

axiosを利用します

axiosでs3のURLをgetして、その時にresponseをblobで受け取ります。
受け取ったresponseを使って、new BlobでBlob型に変換します。

test.js

import axios from 'axios'

// 〜省略〜
          const req = new FormData()
          try{
            const response = await axios.get(S3のURL, { responseType: 'blob' })
            const blobData = new Blob([ response.data ], { type: "image/png" })
            req.append(`image`, blobData)
          } catch (error) {
            console.error(error.response)
          }

その後は肉なり焼くなり好きに処理してください！