最近一個項目當中,要求上傳圖片,并且限制圖片大小,雖然在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{}段并修改以下內容:
當中的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 定義區域加入:
(注意此處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='提交';
}
});
總結:其實三個思路是按照時間順序來寫的,在實際項目中最終的功能實現也是更新換代才有了最后的結果。不過當有這樣類似的經驗,下次遇到這樣的彎路就省掉,同時會讓自己的處理問題的方式更加成熟。
以上所述是小編給大家介紹的三個思路解決laravel上傳文件報錯:413 Request Entity Too Large問題,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!
您可能感興趣的文章:- 利用laravel+ajax實現文件上傳功能方法示例
- Laravel框架文件上傳功能實現方法示例
- vuejs+element-ui+laravel5.4上傳文件的示例代碼
- PHP Laravel 上傳圖片、文件等類封裝
- Laravel+Layer實現圖片上傳功能(整理篇)
- Laravel中前端js上傳圖片到七牛云的示例代碼
- Laravel框架+Blob實現的多圖上傳功能示例
- Laravel+Intervention實現上傳圖片功能示例
- Laravel框架實現的上傳圖片到七牛功能詳解
- Laravel框架實現文件上傳的方法分析