最近一个项目当中,要求上传图片,并且限制图片大小,虽然在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配置是否正确
  1. /usr/local/nginx/sbin/nginx -t

3、测试配置正确后,重启nginx使配置生效

  1. /etc/init.d/nginx restart
注意:要是以php运行的话,这个大小client_max_body_size要和php.ini中的如下值的最大值差不多或者稍大,这样就不会因为提交数据大小不一致出现错误。
  1. post_max_size = 2M
  2. 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定义区域加入:
  1. fastcgi_intercept_errors on;

3、nginx的网站conf配置中的server 定义区域加入:

  1. error_page 413 /413.htm;

(注意此处413与/413.htm之间不要用等号,否则返回状态码为200而不是413,同时尽量不要 http://www.xxx.com/404.html出错则会跳过该页面) 
4、测试nginx配置是否正确

  1. /usr/local/nginx/sbin/nginx -t

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

  1. /etc/init.d/nginx restart

思路三:表单提交之前先用JS判断并且阻止表单提交

  思路二虽然比思路一有进步了一些,但是提醒还是跳转页面了,这样的用户体验并不会好到哪里去,所以最终想到了思路三。上文已经说过,这413报错是来自后端nginx的,nginx的判断虽然比PHP还要早,但是我们可以直接从前端处理呀!想到这里,实现并不难了。可以添加文件上传事件判断,如果文件超过限制的大小,那么就弹出警告框并让提交按钮失效,如果文件没有超过限制大小,就提示大小合适,并且把之前的按钮失效状态取消掉。
   简单的HTML代码:

  1. <form action="" method="post" enctype="multipart/form-data">
  2. <div class="form-group">
  3. <label for="picture">文章展示图片(800KB内):</label>
  4. <input id="picture" name="picture" type="file"/>
  5. </div>
  6. <button type="submit" id="submit" class="am-btn am-btn-success"><span class="am-icon-send"></span>
  7. 发布
  8. </button>
  9. </p>
  10. </form>
  JS代码:

  1. $('#picture').bind('change', function () {
  2. if (this.files[0].size / 1024 / 1024 > 0.8){
  3. value = this.files[0].size/1024;
  4. alert('该文件大小是 ' + value .toFixed(0)  + "KB,已超过大小限制,请修改!");
  5. document.getElementById("submit").disabled=true;
  6. document.getElementById("submit").innerHTML='非法图片内容';
  7. }else{
  8. alert('该文件可以提交!');
  9. document.getElementById("submit").disabled=false;
  10. document.getElementById("submit").innerHTML='提交';
  11. }
  12. });

http://blog.csdn.net/tim_phper/article/details/51992986

Nginx解决错误413 Request Entity Too Large的更多相关文章

  1. Nginx配置,413 Request Entity Too Large错误解决

    今天有同事找我,说图片上传之后,不知道去哪里了.分析了一下问题,找到原因之后做了处理,这里简要记录一下. 问题原因: 1.首先后台log并无错误信息: 2.捡查了一下浏览器,发现network中有报错 ...

  2. nginx产生【413 request entity too large】错误的原因与解决方法

    项目上在做上传文件(清单导入)的时候产生了这个错误: 从字面上看,说的是请求的实体太大的问题,那么可以联想到是HTTP请求中的Body大小被限制了的原因. Nginx中的[client_max_bod ...

  3. Nginx 报错413 Request Entity Too Large 上传文件过大

    1.进入Nginx安装路径下的conf文件夹中(我的路径是:/usr/local/nginx/conf) 2.打开nginx.conf,在http大括号中第一行加语句:client_max_body_ ...

  4. jenkins错误413 Request Entity Too Large<

    jenkins-nginx--sonar1/sonar2

  5. Nginx出现413 Request Entity Too Large错误解决方法

    Nginx出现的413 Request Entity Too Large错误,这个错误一般在上传文件的时候出现,打开nginx主配置文件nginx.conf,找到http{}段,添加 解决方法就是 打 ...

  6. Nginx 出现413 Request Entity Too Large 错误解决方法(上传大小限制)

    | 时间:2013-09-05 20:19:14 | 阅读数:485075 [导读] Nginx出现的413 Request Entity Too Large错误,这个错误一般在上传文件的时候出现,打 ...

  7. nginx 413 request entity too large解决办法

    nginx 出现:413 request entity too large,一般是在上传图片的时候,上传的图片大小超过了服务器设置的最大上传大小,需要修改nginx和PHP的设置: (1)打开 /us ...

  8. 413 Request Entity Too Large

    做小视频上传,结果接口总是返回500,服务器端跟踪,根本就进不来,再次翻查,发下服务器返回的其实是413,只不过APP底层接口将所有不是200的回包都转成500了,问题定位. 有了错误码,有了描述,字 ...

  9. .netcore 部署时遇到413 Request Entity Too Large 和 413Payload Too Large 的问题

    .netcore3.1 遇到一个webapi 上传大文件问题 首先,在kestrel模式调试模式下上传 会报错413, 需要在三个地方添加 1.startup中 这里设置的2g最大值 2.在progr ...

随机推荐

  1. cocos2dx打飞机项目笔记五:CCSpriteBatchNode 的使用

    在上一节里,在头文件看到 定义了一个 CCSpriteBatchNode* batchNode;,在addEnemy方法里看到 batchNode->addChild(enemy); 新建的敌机 ...

  2. Android系统--Binder系统具体框架分析(一)补充

    Android系统--Binder系统具体框架分析(一)补充 补充:对Binder驱动分析一的代码补充,添加saygoobye和saygoodbye_to服务 test_server.h #ifnde ...

  3. vi编辑器快捷键使用详解

    文本编辑器是所有计算机系统中最常用的一种工具.UNIX下的编辑器有ex,sed和vi等,其中,使用最为广泛的是vi,而vi命令繁多,论坛里好像这方面的总结不多,以下稍做总结,以资共享!渴望更正和补充! ...

  4. springmvc返回视图(解析)

    1.什么是视图? 视图就是展示给用户看的结果.可以是很多形式,例如:html.JSP.excel表单.Word文档.PDF文档.JSON数据.freemarker模板视图等等. 2.传统JSP和JST ...

  5. 提高MySQL效率与性能的技巧

    为查询缓存优化你的查询 大多数的MySQL服务器都开启了查询缓存.这是提高性最有效的方法之一,而且这是被MySQL的数据库引擎处理的.当有很多相同的查询被执行了多次的时候,这些查询结果会被放到一个缓存 ...

  6. processing学习整理---Input(输入)

    1.鼠标1D. 左右移动鼠标可移动天平. “mouseX”变量用于控制矩形的大小和颜色. void setup(){ size(640,360); noStroke(); colorMode(RGB, ...

  7. super和this 在构造方法上的用法

    super Super()表示调用父类的构造方法.如果没有定义构造方法,那么就会调用父类的无参构造方法,即super(). this 在构造方法中,this表示本类的其他构造方法:student(st ...

  8. windows 10系统更新失败的解决办法

    最近遇到一个问题,系统总是自动下载一个更新,看样子是个补丁吧,但是每次提醒重新启动以安装更新,但每次又安装失败,回退.就这样,下载,重启,安装失败,下载......一直循环,搞得都不敢关机了,因为这样 ...

  9. 开发者必备,超实用的PHP代码片段!

    此前,研发频道曾发布<直接拿来用,10个PHP代码片段>,得到了网友们的一致好评.本文,笔者将继续分享九个超级有用的PHP代码片段.当你在开发网站.应用或者博客时,利用这些代码能为你节省大 ...

  10. Web API 接口-JavaScript全部api接口文档

    当使用JavaScript编写网页代码时,有很多API可以使用.以下是所有对象.类型等接口的列表,你在开发网页应用程序或站点时使用它们. API文档地址:https://developer.mozil ...