Three ideas to solve laravel File Upload error: 413 Request Entity Too Large problem, laravelentity

Three ideas to solve laravel File Upload error: 413 Request Entity Too Large problem, laravelentity

In the latest project, you need to upload images and limit the image size. Although you have added related form verification in laravel to prevent large file uploads, when submitting a form, nginx reports an error before laravel can handle it. When you carefully read the error page, you will find nginx version information. After analysis, this error is reported because nginx's default file size configuration client_max_body_size is only 2 MB, nginx-based verification is earlier than laravel verification. If you want to enable error reporting instead of directly displaying 413 Request Entity Too Large, there are three solutions.

Idea 1: Modify nginx Configuration

This is the simplest way. The error is that nginx does not allow uploading files with too many configuration items, so you can increase the nginx upload size configuration.

1. Open the nginx main configuration file nginx. conf. Generally, in the/usr/local/nginx/conf/nginx. conf location, locate the http {} segment and modify the following content:

client_max_body_size 2m; 

Change the value of 2 m to the allowed file size you need.

2. Check whether the nginx configuration is correct after modification.

/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 it is run in php, The client_max_body_size value must be the same or slightly larger than the following value in php. ini, so that the error will not occur because the submitted data size is inconsistent.

post_max_size = 2M upload_max_filesize = 2M 

Change the value of 2 m to the allowed file size you need. Change 2 m to the size you set in the first step.

Idea 2: Modify and add a friendly error page

Although the idea is simple, it may not be able to pass the project test. The project test requires that the error 413 Request Entity Too Large be not displayed, so we have to add a friendly error page.

1. edit a simple htm as a static friendly page

(Please use garbled html files<meta http-equiv="Content-Type" content="text/html; charset=utf-8">)

2. Change nginx. conf and add it to the http definition area:

fastcgi_intercept_errors on;

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

error_page 413 /413.htm; 

(Do not use equal signs between 413 and/413.htm. Otherwise, the return status code is 200 instead of 413. Do not skip this page when an error occurs at http://www.xxx.com/404.html)

4. test whether the nginx configuration is correct.

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

5. If nginx is restarted successfully in the previous step

/etc/init.d/nginx restart 

Train of Thought 3: Determine with JS before submitting a form and prevent form submission

Although thinking 2 has improved, it reminds me to jump to the page. This user experience is not good, so I finally thought of thinking 3. As mentioned above, the 413 error is reported from the backend nginx. Although nginx is judged earlier than PHP, we can handle it directly from the front end! It is not difficult to implement it here. You can add a file upload event. If the file size exceeds the limit, a warning box is displayed and the submit button becomes invalid. If the file size does not exceed the limit, a message indicating that the file size is appropriate is displayed, and cancel the previous button failure status.

Simple HTML code:

<Form action = "" method = "post" enctype = "multipart/form-data"> <div class = "form-group"> <label for = "picture"> Article image Display (within KB): </label> <input id = "picture" name = "picture" type = "file"/> </div> <button type = "submit" id = "submit" class = "am-btn-success"> <span class = "am-icon-send"> </span> release </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 ('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 = 'invalid image content';} else {alert ('this file can be submitted! '); Document. getElementById ("submit"). disabled = false; document. getElementById ("submit"). innerHTML = 'Submit ';}});

Conclusion: in fact, the three ideas are written in chronological order, and the final function implementation in the actual project is the final result of the upgrade. However, if you have such experience, the next time you encounter such a detour, you can save it and make your solution more mature.

The above is a small series of three ideas for you to solve the laravel File Upload error: 413 Request Entity Too Large problem, hope to help you, if you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!