最近一个项目当中,要求上传图片,并且限制图片大小,虽然在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. ResourceLoader笔记

    Ant路径匹配 Ant路径通配符支持“?”.“*”.“**”,注意通配符匹配不包括目录分隔符“/”: “?”:匹配一个字符,如“config?.xml”将匹配“config1.xml”: “*”:匹配 ...

  2. poj 1703 Find them, Catch them 【并查集 新写法的思路】

    题目地址:http://poj.org/problem?id=1703 Sample Input 1 5 5 A 1 2 D 1 2 A 1 2 D 2 4 A 1 4 Sample Output N ...

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

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

  4. LCN协调者服务集群

    官方文档: https://github.com/codingapi/tx-lcn/wiki/TxManager%E9%9B%86%E7%BE%A4%E8%AF%B4%E6%98%8E 核心原理 通过 ...

  5. 常见Web安全漏洞

    1.web安全常见攻击手段     xss  sql注入  防盗链  csrf  上传漏洞 2. 信息加密与漏洞扫描   对称加密 非对称加密 3. 互联网API接口安全设计 4. 网站安全漏洞扫描与 ...

  6. HDU 5925 离散化

    东北赛的一道二等奖题 当时学长想了一个dfs的解法并且通过了 那时自己也有一个bfs的解法没有拿出来 一直没有机会和时ji间xing来验证对错 昨天和队友谈离散化的时候想到了 于是用当时的思路做了一下 ...

  7. FreeTDS-SQL Server在linux和unix下的免费驱动

    微软为MS SQL Server的连接和使用提供了很好的 驱动和 文档. 不幸的是,那只能在windows操作系统上使用. 所以对于Linux或者Unix,您需要寻找不同的方法来连接MS SQL Se ...

  8. javascript删除JSON元素

    首先要搞清JSON的数据格式,我这里所说的JSON都是指javascript中的. JSON数据是由对象和数组数据结构组成,我们只要学会javascript中对对象和数组的删除方法即可对JSON项进行 ...

  9. nvm工具

    nvm工具 nvm简介 nvm是node version manager的简称,是nodeJs的版本管理器,他可以在一台主机上对node的版本进行方便的切换.我尝试了一下window的,但是不行,你可 ...

  10. 解决Navicat连接mysql报错:1862 - Your password has expired. To log in you must change it using a client that supports expired passwords.

    今天尝试用Navicat连接mysql时,发现一个1862的报错问题: 后来参照这篇文章https://blog.csdn.net/u010513756/article/details/5073501 ...