node.jsでpostされた画像をapiにpostしたい

node.js初学者です。

■背景
現在、node.jsでユーザーからpostされた画像を別のAPIにpostし、結果をユーザーに返すプログラムを作成しています。

■問題点
node.jsのserver側で受信すると以下のような形式で受け取りました

<中略>
  path: '/ig/ig',
  payload: {
    img_file: <Buffer ff d8 ff e0 00  ... 299480 more bytes>
  },
  plugins: {},
<中略>

まだ、node.jsから下記の処理はAPIに正常に送信できていることを確認しています。

javascript
1    const result = new Promise(function(callback) {
2      const FormData = require('form-data');
3      const form = new FormData();
4      const fs = require('fs');
5      const file = fs.createReadStream('./20211125234647_1.jpg');
6      form.append('img_file', file);
7      const head = {headers: { 
8        "content-type": "multipart/form-data" ,
9        ...form.getHeaders(),
10      },};
11      const axios = require('axios');
12      axios.post(apiurl,form,head )
13      .then(response => {
14        callback(JSON.stringify(response.data));
15      })
16      .catch(error => {
17        callback(JSON.stringify(error));
18      })
19      .finally(() => {
20        callback(JSON.stringify("error"));
21      });
22    });

今回は一時ファイルなどを作成したくなく、postから受け取ったデータをそのままAPIに渡したいと考えています。
Bufferをそのまま渡すだけだとnode.js側でエラーとなってしまい、BufferからReadStream形式への変換方法もわからず、
検索してでた自動翻訳のページを元に試しましたが、うまくいきませんでした。

10時間以上この1点で止まってしまっているため、解決策に心当たりがある方はご教授願えないでしょうか。

追記フォームは以下を利用しています。

http
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>File</title>
6</head>
7<body>
8  <form method="post" action="http://nodejsserver" enctype="multipart/form-data">
9    <input type="file" id="img_file" name="img_file">
10    <input type="submit" value="送信">
11  </form>
12  <p>
13  </p>
14</body>
15</html>

追加で確認した内容
const { Readable } = require('stream');で変換する方式ですが、中身が入っていない？ような気がしています。

js
1    const imgdata = req.payload.img_file;
2    console.log(imgdata );
3    console.log("↑受け取ったデータ");
4    const { Readable } = require('stream');
5    const stream = Readable.from(imgdata);
6    console.log(stream);

返ってきた値

log
1<Buffer ff d8 ff e0 00 10 4a 46 49 46 00 01 01 00 00 01 00 01 00 00 ff db 00 43 00 03 02 02 03 02 02 03 03 03 03 04 03 03 04 05 08 05 05 04 04 05 0a 07 07 06 ... 299480 more bytes>
2↑受け取ったデータ
3Readable {
4  _readableState: ReadableState {
5    objectMode: true,
6    highWaterMark: 16,
7    buffer: BufferList { head: null, tail: null, length: 0 },
8    length: 0,
9    pipes: [],
10    flowing: null,
11    ended: false,
12    endEmitted: false,
13    reading: false,
14    sync: true,
15    needReadable: false,
16    emittedReadable: false,
17    readableListening: false,
18    resumeScheduled: false,
19    errorEmitted: false,
20    emitClose: true,
21    autoDestroy: true,
22    destroyed: false,
23    errored: null,
24    closed: false,
25    closeEmitted: false,
26    defaultEncoding: 'utf8',
27    awaitDrainWriters: null,
28    multiAwaitDrain: false,
29    readingMore: false,
30    decoder: null,
31    encoding: null,
32    [Symbol(kPaused)]: null
33  },
34  _read: [Function: read],
35  _events: [Object: null prototype] {},
36  _eventsCount: 0,
37  _maxListeners: undefined,
38  [Symbol(kCapture)]: false
39}

hoshi-takanori

2021/11/27 21:25

Buffer から Stream への変換はこんな感じみたいです。 https://stackoverflow.com/a/62143160/1019868

shibamata

2021/11/28 06:46

回答ありがとうございます。そちらは試したのですが、ReadStream でなくReadableが帰ってくるので、求めている型と異なりました。そのスレッド以外でやりとりされておらず分からずこちらで質問させていただきました。

miyabi-sun

2021/11/28 07:24

> ReadStream形式これがわかんないんですが、誰かがReadStreamをよこせ、Readableはダメだと言ってるんですか？ Streamは川を意味しており、 Readableが読み込み元ということで川の上流 Writeableは川の上流から流れてきた破片（chunk）を受け取って処理する川の下流を意味します。途中合流したり破片を加工する専用のクラスが細々ありますが大まかこんな感じ。だからReadStreamなんて無いと思うんですよね。（的外れな事言ってるかもしれなくて本当に申し訳ない）とりあえずReadableを渡してみて、ダメならReadableStream.getReader()でリーダーを作って渡してみるというのはどうでしょう？ https://developer.mozilla.org/ja/docs/Web/API/Streams_API

shibamata

2021/11/28 08:12

miyabi-sunさんご回答ありがとうございます。まとめたつもりが言葉足らずになってしまっていました。 > 誰かがReadStreamをよこせ、Readableはダメだと言ってるんですか？元々、HTMLのformからpython(flask)へ画像をPOSTして画像処理を行っていました。それをHTML→node.js(axios)→flaskに変更したく、修正を行っていまいた。 node.jsでPOSTの画像を受け取ると、<buffer ~~ >形式のデータとなっていました。これを加工せずにflask側に送るも画像データとして扱えませんでした。しかし、node.js側でサーバーのローカルにある画像をfsで読み込み、flaskに渡すとHTMLのformから送ったときと同じように画像として扱うことができました。それぞれのデータをconsole.logで見ると、BufferとReadStreamの違いがあったため、BufferをReadStreamと同じように扱える状態にすれば、良いと考えました。検索するもhoshi-takanoriさんにご提示いただいたサイトとそのサイトと会話内容が全く同じサイトしかみつからず、実際に試してみると(追加で確認した内容として本文に追記済み)同じくpython側では画像として扱うことができませんでした。そこで、console.logで確認してみるとReadableの形式であったため、(ReadStreamでは成功していることから)形式の違いによって失敗しているのだろうと判断しました。＞とりあえずReadableを渡してみて、ダメならReadableStream.getReader()で＞リーダーを作って渡してみるというのはどうでしょう？こちら試してみます。 Readableへの変換は参考サイト通りに作成したと思うのですが、返ってきた値を改めて確認してみるとそもそもReadableの中身がNULLな気がしています。

shibamata

2021/11/28 09:31

こちら、そもそもの対応方針が良くなかった可能性があるため、別スレッドを建て直させていただきました。 https://teratail.com/questions/371353 回答頂いた方々はありがとうございました。