浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【cordova-react】画像をBase64で変換しないとTypeError: cyclic object valueで怒られる話

今日は、自分のミスを晒すことで二度と同じコードを書いてしまわないようにと戒めの気持ちで綴ります。

変数の誤字だったり空欄を統一しなかったりしょうもないちょんぼとはまた別のお題になります。

たった今の話になりますが、ある画像をaxiosを使ってサーバーに送ろうとしたときにTypeError: cyclic object valueで怒られてハマって

しまいました。

どうやらサーバーに渡すときにbase64に変換する前にsetStateしてしまったのが原因らしくこれでは何の画像なのか解読不能ですよ

という解釈だと思っています。

以下が自分が誤って書いてしまったコードになります。

<pre>  onImageSelected(e) {
    const file = e.target.files[0];
    const fr = new FileReader();
    fr.onload = () => {
      const preview = document.querySelector('img');
      preview.src = fr.result;
      console.log(preview);
   //ここはダメ!!!!
   this.setState({profImage: preview});
    };
    loadImage.parseMetaData(file, (data) => {
      const options = {
        maxHeight: 1024,
        maxWidth: 1024,
        canvas: true,
      };
      if (data.exif) {
        options.orientation = data.exif.get('Orientation');
      }
      loadImage(file, (canvas) => {
        const dataUri = canvas.toDataURL('image/jpeg');
        const imgNode = document.getElementById('image');
        imgNode.src = dataUri;
        //正しい位置
        this.setState({profImage: dataUri});
      },
      options);
    });
    fr.readAsDataURL(file);
  }
</pre>

ここではloadImageで処理する前に元の形式のままsetStateしてしまっています。onLoadの処理をしている時はまだ画像を変換していない

のでこれでは受け付けてくれないですよね・・・。なのでloadImage関数で確実に変換できているdataUri変数をsetStateしてあげれば

サーバーもうけとってくれるはずです。

画像を指定してサーバーに送ったら動かなくなった又は落ちてしまったという方はcatch内でログを辿ってみてください。

そしてTypeError: cyclic object valueが出てきたらこのブログを頼ってみてください。(そこで解決するかは分かりません!)

 

  • この記事いいね! (0)