最近一個項目當中，要求上傳圖片，并且限制圖片大小，雖然在laravel當中已經添加了相關的表單驗證來阻止文件過大的上傳，然而當提交表單時，還沒輪到laravel處理，nginx就先報錯了。當你仔細看報錯頁面時，你會發現有nginx版本信息，經過分析，這報錯是因為nginx的默認上傳文件大小配置client_max_body_size只有2MB， 基于nginx驗證比laravel驗證要早，想要友好報錯而不是直接顯示413 Request Entity Too Large，那么就有三個思路去解決。
思路一：修改nginx配置
這是最簡單的一個做法，著報錯原因是nginx不允許上傳配置過大的文件，那么件把nginx的上傳大小配置調高就好。
1、打開nginx主配置文件nginx.conf，一般在/usr/local/nginx/conf/nginx.conf這個位置，找到http{}段并修改以下內容：
client_max_body_size 2m;
當中的2m修改成你需要的允許文件大小。
2、修改后，測試nginx配置是否正確
/usr/local/nginx/sbin/nginx -t
3、測試配置正確后，重啟nginx使配置生效
/etc/init.d/nginx restart
注意:要是以php運行的話，這個大小client_max_body_size要和php.ini中的如下值的最大值差不多或者稍大，這樣就不會因為提交數據大小不一致出現錯誤。
post_max_size = 2M upload_max_filesize = 2M
當中的2m修改成你需要的允許文件大小。把當中的2m修改成你第一步設置的大小。
思路二：修改添加友好報錯頁面
思路一雖然簡單，但是不一定能過項目測試那一關，項目測試就要求不要看到413 Request Entity Too Large這樣顯示錯誤，所以我們只好添加友好報錯頁面咯。
1、編輯一個簡單的htm作為靜態友好頁面
(注意html文件亂碼請用<meta http-equiv="Content-Type" content="text/html; charset=utf-8">)
2、更改nginx.conf在http定義區域加入：
fastcgi_intercept_errors on;
3、nginx的網站conf配置中的server 定義區域加入：
error_page 413 /413.htm;
（注意此處413與/413.htm之間不要用等號，否則返回狀態碼為200而不是413，同時盡量不要 http://www.xxx.com/404.html出錯則會跳過該頁面）
4、測試nginx配置是否正確
/usr/local/nginx/sbin/nginx -t
5、如果上一步成功重啟nginx
/etc/init.d/nginx restart
思路三：表單提交之前先用JS判斷并且阻止表單提交
思路二雖然比思路一有進步了一些，但是提醒還是跳轉頁面了，這樣的用戶體驗并不會好到哪里去，所以最終想到了思路三。上文已經說過，這413報錯是來自后端nginx的，nginx的判斷雖然比PHP還要早，但是我們可以直接從前端處理呀！想到這里，實現并不難了。可以添加文件上傳事件判斷，如果文件超過限制的大小，那么就彈出警告框并讓提交按鈕失效，如果文件沒有超過限制大小，就提示大小合適，并且把之前的按鈕失效狀態取消掉。
簡單的HTML代碼：
<form action="" method="post" enctype="multipart/form-data"> <div class="form-group"> <label for="picture">文章展示圖片(800KB內):</label> <input id="picture" name="picture" type="file"/> </div> <button type="submit" id="submit" class="am-btn am-btn-success"><span class="am-icon-send"></span> 發布 </button> </p> </form>
JS代碼：
$('#picture').bind('change', function () {
if (this.files[0].size / 1024 / 1024 > 0.8){
value = this.files[0].size/1024;
alert('該文件大小是 ' + value .toFixed(0) + "KB,已超過大小限制，請修改！");
document.getElementById("submit").disabled=true;
document.getElementById("submit").innerHTML='非法圖片內容';
}else{
alert('該文件可以提交！');
document.getElementById("submit").disabled=false;
document.getElementById("submit").innerHTML='提交';
}
});
總結：其實三個思路是按照時間順序來寫的，在實際項目中最終的功能實現也是更新換代才有了最后的結果。不過當有這樣類似的經驗，下次遇到這樣的彎路就省掉，同時會讓自己的處理問題的方式更加成熟。