1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Expressで画像データ取得時にarrayBufferがちゃんと帰ってこない

Posted at

#初めに

題材がピンポイントですが、自分のように知らないで引っかかってしまう人向けの記事です。
画像データに限らず、バイナリデータを取得して送信したいのなら当てはまる話だと思います。

##内容

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の場合は取得してそのまま返せばできました。

##参考URL
Stack Overflowにあった質問

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?