【Next.js】fetchで送信した画像がサーバー側で取得できない

Question

前提

Next.js × TypeScriptで画像送信フォームを作っています。
画像を選択してプレビューを表示するところまでできたのですが、送信でうまくいかないです。

実現したいこと

• 複数画像の送信
• サーバー内で画像の保存

発生している問題

フロント側の送信部分（一部抜粋）

const data: postData = {
      name: inputNameRef.current?.value, // 投稿名
      files: images, // 画像データ配列のstate
};

const post = await fetch(`${window.location.href}api/upload`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
}); 

サーバー側のPOST

import type { NextApiRequest, NextApiResponse } from "next";
type Data = {
  name: string;
};
export default function handler(
  req: NextApiRequest,
  res: NextApiResponse<Data>
) {

  console.log(req.body); // ここでnameしか確認できない
  
  res.status(200).json({ name: "!!!" });
}

req.bodyの出力結果が以下のようになる

{ name: 'TEST', files: [ {}, {} ] }

画像を2枚選択して送信したのだが、filesの中身が空のオブジェクトになっている

試したこと

• 画像のデータをuseRefで取得する
• new FormDataを使う
  • なぜかreq.body内が文字化けした

追記

FormDataを使った場合

以下で送信はできた

const formData = new FormData();
formData.append("name", name || "");

for await(const [i, v] of Object.entries(images)) {
formData.append("files", v );
}


const post = await fetch(`${window.location.href}api/upload`, {
method: "POST",
body: formData,
});

console.log(await post.json());

ただし、サーバー側でのconsole.log(req.body);の中身が以下のようになって解析できない…

// …省略
������;�������|k����^}owa�<�+n�>��hM�n�նU
                                                                        ���t���ѿ���]G��_���������1���X��        A&�29똺�;�������{���?����q�'@fΣ��]\��3���5��.����~Z��uw?�v�ak���?n�����du�����]��3�h޺���|��f=6K�h/#���k���T���J��u�+{��:�}G������
���'���뫋�g>eo���L��V��������Y$�r�                                            W�WI��gi��_��_�^s�
                                  �?c�U�˕�w�H�w_F�e^���+��{�BW��GU�/嵉?s��&ߛms����[��'���������9'ߓ����Y�r�kN+��w��Kx-���:o��tK�-���ׄ�Y״u��G� �|��Y���Z��k���o���UO��g��O�῿[P����w�����!)?ܫ�槨��?���z���w�+�^y0ǽ�J�/����l������>c�:f��#�.-!K{���~�W��.�Mro��x��/�k����?��ڕ�����?��+i�3�!�x�J�;Ǹ�m��7ݮG·W���?ޭ������j��R����)���>#���'��I������Ѯ����h����&�d{��8�?1��i��.���+Q��o�jE4O�X$��7˾x��[����$����%���-wW'c���/���qQ�I��CY�����W�T�n}
 �-!��H����<��U� ��7�#O�u_�zԷ_��mU�O����i�K����ǎKO9.><ϙ���#�ҿ
�I�%���<�c��������y���������������t{����[�G����o<���{�Ͽ�8�j�?����ڕ���
                                                                     I�\��s�4K��70\F�G��gܯU���湣�I�[���ٷ���������c���Q?������=C�S������#yk�W��r;��[�n�^��e�=?�z�� �?�e|5�������rV�3>�}*84�{����߯�Ŧ���{gg�I�e��}5���d�&�     &Lq���7]2��}68<+��c��vW��Z����ϸu������׫|Y�����O����.����
------WebKitFormBoundarywYqLipnWjIwkPquM--

Comments

[maisumakun]

「画像データ配列のstate」とありますが、どのようなデータ形式でしょうか？

[dimyas]

コメントありがとうございます。
データ形式の説明は難しいのですが、以下のように宣言しました。

const [images, setImages] = useState<File[]>([]);

setImagesをする時は引数に以下のようにデータを渡します。

setImages([...e.target.files]);

Answer 1

フロント側はFormDataを使う

const formData = new FormData();
    
for await(const [i, v] of Object.entries(images)) {
      formData.append(i , v);
}
formData.append("name", name || "");


const post = await fetch(`${window.location.href}api/upload`, {
      method: "POST",
      body: formData,
});

サーバー側はformidableを使う

import type { NextApiRequest, NextApiResponse } from "next";
import formidable from "formidable";

export const config = {
  api: {
    bodyParser: false,
  },
};
type Data = {
  name: string;
};
export default function handler(
  req: NextApiRequest,
  res: NextApiResponse<Data>
) {

  if (req.method !== "POST") return;

  const form = new formidable.IncomingForm({ multiples: true , uploadDir: __dirname});

  form.parse(req, async function (err, fields, files) {
    if (err) {
      res.status(500).json({name: err});
      res.end();
      return;
    }

    // ここでinput[type="text"]の{name:値}が取得できる
    console.log(fields);    

    for await(const [i, v] of Object.entries(files)) {
      console.log(i);
      // ここにファイルのデータが入っているがどうやってサーバー内に書き出すか分からない
      console.log(v);

    }

    res.status(200).json({ name: "!!!" });
  })
}

Answer 2

new FormDataを使う なぜかreq.body内が文字化けした

文字化けして特に問題ありません。画像ファイルのデータは（SVGを除けば）文字列として人間が読むことは基本的にできません。

Comments

[dimyas]

new FormDataを使わないと、フォームのテキストとファイルを一緒に送信できないということですか？

[maisumakun]

ファイルをPOSTしたい場合は、FormDataを使うのが標準的なやり方です。どうしてもJSONに詰め込みたい場合は、自力でファイルのデータをJSONに入れられる形に変換する必要があります。

[dimyas]

ありがとうございます。
以下のようにFormDataを使用して送信すると、req.bodyの中身が文字化けした状態で届きました。
軽く調べた感じこれをまた別のモジュールを使って変換しないといけないようですね

```
const formData = new FormData();
formData.append("name", name || "");

for await(const [i, v] of Object.entries(images)) {
formData.append("files", v );
}

const post = await fetch(`${window.location.href}api/upload`, {
method: "POST",
body: formData,
});

console.log(await post.json());

```