画像をアップロードして送信する機能を作っている時はbase64やらオリエンテーションの向きの問題やらめんどうな決まり事が多く
つまずくことも多いと思います。今回はその二つを乗り越えた先での問題になります。
blueimp-load-Imageプラグインを使って画像を修正してサーバーに送る機能を作っていたのですが、送る時にpayload too largeという
見慣れないエラーに直面しました。
これは指定の画像が重いのでサーバー側で受け取れませんよ~って拒否されていいる状態です。
スマホで撮った写真は比較的容量が大きく、どうしても数十MBまで重くなってしまうのでそのままでは送信ができない
場合があります。
サーバー側の画像の容量の最大値を変更することで送信することができますが、クライアント側ではそれが難しいのでこちらで
画像の最大値を変更してあげましょう。
loadImage.parseMetaDataのオプション設定値にあるmaxHeightとmaxwidthの値を変えてみてください。 [javaScript]
const options = {
maxHeight: 512,
maxWidth: 512,
canvas: true,
};
[/javaScript]
変更前は値が1024で設定されていて大きすぎて送れなかったのでここで512にサイズを下げてあげます。
サーバー側が設定している基準値を下回ればどんな画像も送れるようになので同じエラーで悩んでいる方は試してみてください。