三個思路解決laravel上傳文件報錯：413 Request Entity Too Large問題

最近一個項目當(dāng)中，要求上傳圖片，并且限制圖片大小，雖然在laravel當(dāng)中已經(jīng)添加了相關(guān)的表單驗證來阻止文件過大的上傳，然而當(dāng)提交表單時，還沒輪到laravel處理，nginx就先報錯了。當(dāng)你仔細看報錯頁面時，你會發(fā)現(xiàn)有nginx版本信息，經(jīng)過分析，這報錯是因為nginx的默認上傳文件大小配置client_max_body_size只有2MB， 基于nginx驗證比laravel驗證要早，想要友好報錯而不是直接顯示413 Request Entity Too Large，那么就有三個思路去解決。

   思路一：修改nginx配置

   這是最簡單的一個做法，著報錯原因是nginx不允許上傳配置過大的文件，那么件把nginx的上傳大小配置調(diào)高就好。

    1、打開nginx主配置文件nginx.conf，一般在/usr/local/nginx/conf/nginx.conf這個位置，找到http{}段并修改以下內(nèi)容：

client_max_body_size 2m; 

  當(dāng)中的2m修改成你需要的允許文件大小。

   2、修改后，測試nginx配置是否正確

/usr/local/nginx/sbin/nginx -t 

 3、測試配置正確后，重啟nginx使配置生效

/etc/init.d/nginx restart

注意:要是以php運行的話，這個大小client_max_body_size要和php.ini中的如下值的最大值差不多或者稍大，這樣就不會因為提交數(shù)據(jù)大小不一致出現(xiàn)錯誤。

post_max_size = 2M 
upload_max_filesize = 2M 

當(dāng)中的2m修改成你需要的允許文件大小。把當(dāng)中的2m修改成你第一步設(shè)置的大小。 

   思路二：修改添加友好報錯頁面

 思路一雖然簡單，但是不一定能過項目測試那一關(guān)，項目測試就要求不要看到413 Request Entity Too Large這樣顯示錯誤，所以我們只好添加友好報錯頁面咯。

  1、編輯一個簡單的htm作為靜態(tài)友好頁面

(注意html文件亂碼請用meta http-equiv="Content-Type" content="text/html; charset=utf-8">)

2、更改nginx.conf在http定義區(qū)域加入：

fastcgi_intercept_errors on;

  3、nginx的網(wǎng)站conf配置中的server 定義區(qū)域加入：

error_page 413 /413.htm; 

（注意此處413與/413.htm之間不要用等號，否則返回狀態(tài)碼為200而不是413，同時盡量不要 http://www.xxx.com/404.html出錯則會跳過該頁面）

4、測試nginx配置是否正確

/usr/local/nginx/sbin/nginx -t 

5、如果上一步成功重啟nginx

/etc/init.d/nginx restart 

思路三：表單提交之前先用JS判斷并且阻止表單提交

  思路二雖然比思路一有進步了一些，但是提醒還是跳轉(zhuǎn)頁面了，這樣的用戶體驗并不會好到哪里去，所以最終想到了思路三。上文已經(jīng)說過，這413報錯是來自后端nginx的，nginx的判斷雖然比PHP還要早，但是我們可以直接從前端處理呀！想到這里，實現(xiàn)并不難了?？梢蕴砑游募蟼魇录袛?，如果文件超過限制的大小，那么就彈出警告框并讓提交按鈕失效，如果文件沒有超過限制大小，就提示大小合適，并且把之前的按鈕失效狀態(tài)取消掉。

   簡單的HTML代碼：

form action="" method="post" enctype="multipart/form-data">     
 div class="form-group"> 
  label for="picture">文章展示圖片(800KB內(nèi)):/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> 
   發(fā)布 
  /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='非法圖片內(nèi)容'; 
   }else{ 
    alert('該文件可以提交！'); 
    document.getElementById("submit").disabled=false; 
    document.getElementById("submit").innerHTML='提交'; 
   } 
  }); 

總結(jié)：其實三個思路是按照時間順序來寫的，在實際項目中最終的功能實現(xiàn)也是更新?lián)Q代才有了最后的結(jié)果。不過當(dāng)有這樣類似的經(jīng)驗，下次遇到這樣的彎路就省掉，同時會讓自己的處理問題的方式更加成熟。

以上所述是小編給大家介紹的三個思路解決laravel上傳文件報錯：413 Request Entity Too Large問題，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！