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

今回は、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;」（１０MB）という任意の設定をします。

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

以上となります。

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