Fetch を使って画像をサーバーに送信できません

Question

質問させてください。
今 Javascript のFetchについて勉強しているのですが、こちらのサイトを参考にして、ユーザが canvas に描いた画像をサーバーに送信するというコードを試しました。

<canvas class="canvas" width="100" height="80" style="border:1px solid"></canvas>
<input class="btn" type="button" value="Submit">

const canvas = document.querySelector('.canvas');
const btn = document.querySelector('.btn');

canvas.onmousemove = function(e) {
  let ctx = canvas.getContext('2d');
  ctx.lineTo(e.clientX, e.clientY);
  ctx.stroke();
}

function submit() {
  canvas.toBlob(function(blob) { // HTMLCanvasElement.toBlob(callback) → キャンパスに描画したグラフィックをBlobに変換。返り値はなく、結果は第1引数に指定したコールバック関数に渡される
    // console.log(blob); // => Blob { size: 608, type: "image/png" }
    fetch('/image', {
      method: 'POST',
      body: blob
    })
      .then(res => res.json()) // ←ここをコメントアウトするとエラーが出ませんでした
      .then(result => alert(JSON.stringify(result, null, 2)))
  }, 'image/png');
}

btn.addEventListener('click', () => {
  submit();
});

しかしローカルサーバーで実行したところ

Uncaught (in promise) SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data

というエラーが出てしまい、画像がうまく送れません。
試しに.then(res => res.json())の部分をコメントアウトしてみるとエラーが出なかったので、Response オブジェクトから JSON を抽出するところに原因がありそうなのですが、解決方法が全く分からず困っております。
どなたか詳しい方がいらっしゃいましたらご教授いただけると助かります。
よろしくお願いいたします。

■ 開発環境
CentOS 7.6
vagrant 2.2.10
Firefox

Answer 1

レスポンスされたheaders内のContent-Typeを確認してください。
型がapplication/jsonでなければ、JSONのパースは失敗しエラーになります。

参考にされたサイトに「レスポンス本文を取得するメソッド」の記述があります。
レスポンスされた型い対して適切なメソッドを利用する必要があります。
下記の方法でheadersの中身を確認してみてください。

res.headers.get('Content-Type')

Comments

[takopo]

ご回答ありがとうございます。
.then(res => res.headers.get('Content-Type'))
.then(console.log)
というふうに書いて確認してみましたところ
「text/html; charset=UTF-8」
と返ってきました。
application/jsonでないのが原因で、JSONのパースが失敗したことはわかったのですが、ここからどうすればいいのかがよくわかりません・・・解決方法をお教えただけるととても助かります。

[Create_NAYU]

一点確認です。
'/image'ではPOSTされたBlobデータを画像形式に変換してサーバ内に保存するという処理をしているのでしょうか？

解決策案として
res.text() でテキスト化して内容で処理することもできると思いますが、オススメはできません。サーバー側を少しいじる必要があります。
処理をするサーバー側で headers に application/json を加えれば良いと思います。

[takopo]

遅くなり申し訳ございません。
今回私は根本的な勘違いをしておりまして、「/image'」 を image ディレクトリのことだと思っておりました。
Create_NAYU様にご指摘いただいたことでサーバ内で処理をするファイルということが分かりました。
下記のように修正したところ、POST した画像のデータを取得することができました。

```
fetch('/test.php', {
method: 'POST',
body: blob
})
.then(res => res.text())
.then(result => console.log(result))
```
```
<?php
$binarydata = file_get_contents('php://input');
$unpacked = unpack('C*', $binarydata);
var_export($unpacked);
?>
```

お騒がせしてすみません。
この度は何度もご回答いただきありがとうございました！
無事解決でき助かりました。

Answer 2

fetchで動きを確認しましたが
'/article/fetch-basics/post/image'送信後応答内容として
{"message":"Image saved, size:1790."}
が帰ってきていました。

function submit() {
  canvas.toBlob(function(blob) { 
    // HTMLCanvasElement.toBlob(callback) → キャンパスに描画したグラフィックをBlobに変換。返り値はなく、結果は第1引数に指定したコールバック関数に渡される
    // console.log(blob); // => Blob { size: 608, type: "image/png" }
    fetch('/image', {
      method: 'POST',
      body: blob
    })
      .then(res => res.json()) // ←この時点で止めてみて下さい
      .then(result => alert(JSON.stringify(result, null, 2)))
  }, 'image/png');
}

ブラウザのデバッグ画面の「ネットワーク」で'/image'からどんな応答内容か届いているか
確認してみて下さい多分JSON形式ではない形式のようです。

Comments

[takopo]

ご回答ありがとうございます。
Firefox の「ネットワーク」の「応答」で確認しましたところ
「この要求には有効な応答データがありません」と出ていました。
参考サイトでタイプが「json」となっているところが「html」となっているので、ここを json にすればいいと思うのですが、どうすればよいのかが分かりません・・・

[kuma_kuma_]

'/image'から応答が全く無いので何かJSON形式で値を返すようにして下さい。
例: {"message":"Test"}
ちなみに質問者様から見た時のURL'/image'はどんな処理を行うのですか？

[takopo]

遅くなり申し訳ございません。
今回私は 「fetch('/image'」 という部分を image ディレクトリのことだと勘違いしておりまして、そこに jpg や png が保存されるのだとばかり考えておりました。
/image は受け取ったバイナリデータを処理するファイルのことだったのですね。
kuma_kuma_様の「'/image'はどんな処理を行うのですか？」というご質問でやっと勘違いに気付きました。（お恥ずかしい…）
下記のように修正したところ、POST した画像のデータを取得することができました。

```
fetch('/test.php', {
method: 'POST',
body: blob
})
.then(res => res.text())
.then(result => console.log(result))
```
```
<?php
$binarydata = file_get_contents('php://input');
$unpacked = unpack('C*', $binarydata);
var_export($unpacked);
?>
```

この度は何度もご回答いただきありがとうございました！
無事解決でき助かりました。