見出し画像

【Vue.js + axios + FastAPI】arraybufferの扱い

▶️なんとか生きてる

もう流石に大丈夫（だと思うの）だけど、画像処理APIを開発中当時、ハマった話。

フロントのフレームワークにVue.jsを用いた際、axiosでapi（バックのフレームワークはFastAPIを使用）を叩いてarraybufferを変えさせようとしたけど全然上手くいかなかった。

axiosでリクエストを送る際に、axiosインスタンスを下記のように生成するのだけれど、、、

let axiosInstance = axios.create({
       // requestのデータ形式をヘッダーとして指定しておく
       // 'headers': {'Content-Type': 'application/json',}
       'headers': {'Content-Type': 'multipart/formdata'}
     })

上の形だと、API側からbytesのデータを返そうとすると、上手くいかない。

結論から言うと単純な話、

let axiosInstance = axios.create({
       'responseType': 'arraybuffer',  // ここでレスポンスのデータタイプにarraybufferを指定しておく
       'headers': {'Content-Type': 'multipart/formdata'}
     })


上記のように'responseType'を指定してやる、とFastAPIのreturn Response(content=bytesData) で返されたpythonのbytes型などのデータがVue.js（つまりはjs）側でarraybufferとして受け取れる。

個人的注意点

画像処理でフロント側で、DataURLやbase64m文字列などを直接受け取りたい場合は、responseTypeにarraybufferを指定していると、文字列としてではなく、バイナリデータとして受け取ってしまうので、文字化けしてしまって、期待した形のデータを受け取れないため注意

補足（あるいは個人的メモ）

どこか別の記事でやるつもりだけど・・・

imgタグのsrc属性にURLで画像を埋め込んだりしたいときに、blobURLを生成したいと思うけど、blobURLはフロント（jsによるDOM）上でないと生成できない。フロントにあまり処理を持たせたくない時は、あらかじめbase64文字列などから作成したDataURLをAPIからレスポンスして、それを直接埋め込む、と言う手法で代替できる。






いいなと思ったら応援しよう！