【Webサイト】413 Request Entity Too Large スマホからファイルアップロード時のエラー対策

投稿日2019年9月20日 / 更新日2019年10月30日


今回は、Webサイトでファイルアップロードをするに当たって、パソコン(PC)では開けるのに、スマートフォン(スマホ)では開けない現象について書いていこうと思います。


前提として、本番環境であることと、Nginxサーバーであることです。(SentOS7)


スマホで「413 Request Entity Too Large」のようなエラーが起こっている場合は、サーバーの設定に問題がある。


そもそもファイルタグが反応すらしないなら、HTMLのformタグに問題があります。


私の場合はDjangoフレームワークを使っているので、Django側の設定かと思いサードパーティのdjango-imagekitなどを導入しファイルの自動加工などを施しましたがうまくいきませんでした。


ここではできる限り一通りの対策をお話していきます。


【目次】



formタグもしくわinputタグの設定


スマホでの話ですが、そもそもファイルのボタンをタップしても反応しない(ファイル選択できない)といった場合は、HTMLのformタグもしくわinputタグの設定が足りていないです。


Djangoのテンプレートタグを使っている場合のフォームタグでは、accept="image/*"オプションを追加します。



<form accept="image/*" method="POST" enctype='multipart/form-data'>
{{ form.file }}
{% csrf_token %}
<input type="submit" value="ボタン">
</form>



inputタグも同様にaccept="image/*"オプションを追加します。



<form method="POST" enctype='multipart/form-data'>
<input type="file" accept="image/*">
{% csrf_token %}
<input type="submit" value="ボタン">
</form>



すると、反応しファイルを選択できるようになります。


413 Request Entity Too Large対策


ファイルを選択し送信もしくわ適用させたときにエラーが起こる場合は、Nginxのデフォルト設定では許容範囲外の大容量ファイルであるからです。


デフォルトでは1MBが設定されているので、設定ファイルのserverディレクティブに「client_max_body_size 10m;」(10MB)という任意の設定をします。


Webサイト公開時に設定したNginxのconfigファイルを開きます。


恐らく/etc/nginx/conf.d/****.conf辺りにあるかと思います。


私はCentOS7なので、nanoエディタで****.confを開き、serverディレクティブの各http、https配下に記述します。



server {
listen 80;
server_name example.com;
client_max_body_size 10m; ←ココ
}

server {
listen 443 ssl;
ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/example.com/privkey.pem;
server_name example.com;
client_max_body_size 10m; ←ココ
}



Nginxを再起動しエラーなどが起こらなければ終了です。



$ sudo systemctl restart nginx

一応アプリ側も
$ sudo systemctl restart django



以上となります。


Twitterの方で新着記事投稿のお知らせなどをツイートしていますので、最速で受け取りたい方はぜひフォローをして頂ければありがたいです。


最後までご覧いただきありがとうございました。


トップページに戻る

Follow @kenno_w