AxiosでBinaryファイルを受信する際にハマったこと・・・
Buffer fileをAxios使ってやり取り
自分がやり取りしたかったのではFBX-Binaryファイル。
FBXとはそもそも3Dファイルの一種です。
これをAPIサーバー上から取得して、
Proxyへ持っていきたいと思いました。
一般的なAxiosを使ったGET処理はこんな感じ。
// Axiosを使ったGET処理 axios.get('/test.fbx') .then(response => { console.log(response.data.length) });
ここでresponseTypeのoptionにarrayBufferを指定します。
ここでarrayBufferを指定してやらないと、
「バイナリではない文字列の何か」が返されてしまい、
元のファイルとバイナリファイルの整合性が取れなくなります。
AxiosはUTF-8に対応していることから、UTF-8文字列と推測。
現にByte数が元より増加します。（なぜか不明）
// Axiosを使ったArrayBufferで返すGET処理 axios.get('/test.fbx', { responseType : 'arrayBuffer' }) .then(response => { console.log(response.data.length); });
ArrayBufferってなに？
JSでバイナリデータを扱う際に物理メモリ領域を確保する際に扱うクラス。
いわゆるデータである数字がずっと続いているようなデータです。
混同しやすいのがuint○arrayといった形式で
こちらはバイト数ごとに配列として扱っていることから、
プログラム上から操作できます。
以前記事にしたReadableStreamの中身をchankごとに取得する操作は
uint○arrayの形式を生かしています。
逆に送信する場合
バイナリファイルをサーバーに送りたいとなった場合、
注意すべき点としてheaderに以下を付けましょう。
これはMIMEタイプの一種で
'application/octet-stream'は
ファイルの種類が明確でない（不明）、
明示したくない（秘匿）場合に活用されるそうです。
https://wa3.i-3-i.info/word15821.html
headers: { 'Content-type': 'application/octet-stream' }
