初めに
題材がピンポイントですが、自分のように知らないで引っかかってしまう人向けの記事です。
画像データに限らず、バイナリデータを取得して送信したいのなら当てはまる話だと思います。
内容
axiosを使ってexpressにhttpリクエストした際に、axiosのresponseTypeにarrayBufferを指定して、expressでarrayBufferを返すようにしたのだけど、なぜかちゃんと帰ってこない！
と思ったら、express側ではbufferを返せばいいみたいです。
以下に、一例としてコードの一部を載せておきます。
フロント側
apiにリクエストを送ります
index.js
import axiosBase from "axios";
import axiosConfig from "./axios.config.js";
const axios = axiosBase.create(axiosConfig);
axios
.get('/api')
.then((response) => {
const blob = new Blob([response.data], { type: 'image/jpeg' });
const iconUrl = URL.createObjectURL(blob);
})
.catch((err) => {
console.log(err);
});
↓設定ファイルです。
axios.config.js
module.exports = {
responseType: 'arraybuffer' //ここでハマることもあるのでちゃんと設定する
};
サーバー側
※s3で画像を取得した場合の例です
server.js
app.get('/api', (req, res) => {
const params = {Key: 'key名', Bucket: 'Bucket名'};
s3.getObject(params, (err, data) => {
//自分はここでわざわざarrayBufferに変えて送ってしまっていました...
res.send(data.Body);
});
});
自分は、axiosでresponseTypeに'arraybuffer'って設定してるんだからarraybufferを返せばいいんでしょ？と、素人考えでarraybufferをexpress側から返してしまいました。
s3の場合は取得してそのまま返せばできました。