Three ideas to solve the problem of laravel uploading file error: 413 Request Entity Too Large

In a recent project, it is required to upload pictures and limit the size of pictures. Although relevant form verification has been added in laravel to prevent the upload of files that are too large, when submitting forms, nginx reported errors before it was laravel's turn to process them. When you carefully look at the error reporting page, you will find that there is nginx version information. After analysis, this error reporting is due to the default upload file size configuration of nginx. client_max_body_size is only 2MB. Based on nginx verification, it is earlier than laravel verification. If you want to report errors amicably instead of directly displaying 413 Request Entity Too Large, there are three ideas to solve it.

Idea 1: Modify the nginx configuration

This is the simplest way to report errors because nginx is not allowed to upload configuration of too large files, then the nginx upload size configuration is good.

1. Open the nginx main configuration file, nginx. conf, and at the/usr/local/nginx/conf/nginx. conf, find the http {} and modify the following:

client_max_body_size 2m; 

The 2m is modified to the allowed file size you need.

2. After modification, test whether nginx configuration is correct

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

3. After testing the correct configuration, restart nginx to make the configuration take effect

/etc/init.d/nginx restart

Note: If running at php, the size client_max_body_size should be about or slightly larger than the maximum value of the following values in php. ini, so that no errors will occur because the submitted data size is not 1.

post_max_size = 2M 
upload_max_filesize = 2M 

The 2m is modified to the allowed file size you need. Modify the 2m to the size you set in step 1.

Idea 2: Modify and add a friendly error reporting page

Idea 1 is simple, but if you don't pass the project test, the project test requires not to see 413 Request Entity Too Large display errors like this, so we have to add a friendly error reporting page.

1. Edit a simple htm as a static friendly page

(Note that the html file is garbled. Please use <meta http-equiv="Content-Type" content="text/html; charset=utf-8">)

2. Change nginx. conf to add:

fastcgi_intercept_errors on;

3. Add server definition area in conf configuration of nginx website:

error_page 413 /413.htm; 

(Note that you do not use an equal sign between 413 and/413. htm, or you will return a status code of 200 instead of 413, and try not to skip this page if an error occurs in http://www.xxx.com/404. html.)

4. Test whether the nginx is configured correctly

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

5. If the previous step successfully restarts nginx

/etc/init.d/nginx restart 

Idea 3: Use JS to judge and prevent form submission before form submission

Although thought 2 is better than thought 1, the reminder still jumps to the page, so the user experience will not be better, so I finally thought of thought 3. As mentioned above, this 413 error report comes from the back-end nginx. Although the judgment of nginx is earlier than that of PHP, we can deal with it directly from the front end! Thought of here, it is not difficult to realize. You can add file upload event judgment. If the file exceeds the limited size, a warning box will pop up and invalidate the submit button. If the file does not exceed the limited size, it will prompt that the size is appropriate, and cancel the previous button invalidation state.

Simple HTML code:

<form action="" method="post" enctype="multipart/form-data">     
 <div class="form-group"> 
  <label for="picture"> The article shows pictures (800KB Inside ):</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> 
    Publish  
  </button> 
 </p> 
</form> 

JS code:

$('#picture').bind('change', function () { 
   if (this.files[0].size / 1024 / 1024 > 0.8){ 
    value = this.files[0].size/1024; 
    alert(' The file size is  ' + value .toFixed(0) + "KB, The size limit has been exceeded, please modify it! "); 
    document.getElementById("submit").disabled=true; 
    document.getElementById("submit").innerHTML=' Illegal picture content '; 
   }else{ 
    alert(' This file can be submitted! '); 
    document.getElementById("submit").disabled=false; 
    document.getElementById("submit").innerHTML=' Submit '; 
   } 
  }); 

Summary: In fact, the three ideas are written in chronological order, and the final function realization in the actual project is also updated to have the final result. However, when you have such a similar experience, you will save such detours next time, and at the same time, you will make your own way of dealing with problems more mature.