今日は、自分のミスを晒すことで二度と同じコードを書いてしまわないようにと戒めの気持ちで綴ります。
変数の誤字だったり空欄を統一しなかったりしょうもないちょんぼとはまた別のお題になります。
たった今の話になりますが、ある画像を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が出てきたらこのブログを頼ってみてください。（そこで解決するかは分かりません！）
