三个思路解决laravel上传文件报错:413 Request Entity Too Large问题

最近一个项目当中,要求上传图片,并且限制图片大小,虽然在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{}段并修改以下内容:

client_max_body_size 2m; 

当中的2m修改成你需要的允许文件大小。

2、修改后,测试nginx配置是否正确

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

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

/etc/init.d/nginx restart

注意:要是以php运行的话,这个大小client_max_body_size要和php.ini中的如下值的最大值差不多或者稍大,这样就不会因为提交数据大小不一致出现错误。

post_max_size = 2M
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定义区域加入:

fastcgi_intercept_errors on;

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

error_page 413 /413.htm; 

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

4、测试nginx配置是否正确

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

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

/etc/init.d/nginx restart 

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

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

简单的HTML代码:

<form action="" method="post" enctype="multipart/form-data">
 <div class="form-group">
  <label for="picture">文章展示图片(800KB内):</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>
   发布
  </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='非法图片内容';
   }else{
    alert('该文件可以提交!');
    document.getElementById("submit").disabled=false;
    document.getElementById("submit").innerHTML='提交';
   }
  }); 

总结:其实三个思路是按照时间顺序来写的,在实际项目中最终的功能实现也是更新换代才有了最后的结果。不过当有这样类似的经验,下次遇到这样的弯路就省掉,同时会让自己的处理问题的方式更加成熟。

以上所述是小编给大家介绍的三个思路解决laravel上传文件报错:413 Request Entity Too Large问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • vuejs+element-ui+laravel5.4上传文件的示例代码

    前言 之前的文章讲得太多安装了,今天就不说这个了,因为我的项目是前后端分离的,所以基本是分开执行代码逻辑.其中还有跨域问题,主要还是在laravel中添加头信息放行之类的,这里会提一下做法. element-ui的upload组件 我的vue代码: <template> <el-upload :action="uploadAction" list-type="picture-card" :on-remove="handleRemove&q

  • 三个思路解决laravel上传文件报错:413 Request Entity Too Large问题

    最近一个项目当中,要求上传图片,并且限制图片大小,虽然在laravel当中已经添加了相关的表单验证来阻止文件过大的上传,然而当提交表单时,还没轮到laravel处理,nginx就先报错了.当你仔细看报错页面时,你会发现有nginx版本信息,经过分析,这报错是因为nginx的默认上传文件大小配置client_max_body_size只有2MB, 基于nginx验证比laravel验证要早,想要友好报错而不是直接显示413 Request Entity Too Large,那么就有三个思路去解决.

  • 解决Ajax方式上传文件报错"Uncaught TypeError: Illegal invocation"

    今天使用ajax上传文件时,出现了错误.数据传输的方式是通过定义formData完成的,提交的文件对象也设置为dom对象,但是还是不能发送请求.F12看到后台报了个错误:Uncaught TypeError: Illegal invocation,百度了一下,找到了解决方法. 解决方法:在ajax请求的参数中添加如下两个参数: $.ajax({ ..., processData: false, contentType: false, ... }); processData 类型:Boolean

  • 解决layui上传文件提示上传异常,实际文件已经上传成功的问题

    layui上传文件提示上传异常,实际文件已经上传成功 原因:上传回调的方法接收的参数应该是json格式的,之前返回的是String,所以一直走异常的方法 @ResponseBody @RequestMapping("/web/upload") public JSONObject uploadSourceData(@RequestParam(value="file") MultipartFile file ){ String filePath = "&quo

  • nginx上传文件大小报错500的解决办法

    nginx上传文件大小报错500的解决办法 采用nginx作反向代理,出现了一个诡异的问题,小文件可以提交,大文件会报500内部错误.这个是什么原因导致的呢? 查wiki可知,上传文件大小相关的有三个配置 client_body_buffer_size 配置请求体缓存区大小, 不配的话, client_body_temp_path 设置临时文件存放路径.只有当上传的请求体超出缓存区大小时,才会写到临时文件中 client_max_body_size 设置上传文件的最大值 所以查出来,问题出现的原

  • Spring Boot应用上传文件时报错的原因及解决方案

    问题描述 Spring Boot应用(使用默认的嵌入式Tomcat)在上传文件时,偶尔会出现上传失败的情况,后台报错日志信息如下:"The temporary upload location is not valid". 原因追踪 这个问题的根本原因是Tomcat的文件上传机制引起的! Tomcat在处理文件上传时,会将客户端上传的文件写入临时目录,这个临时目录默认在/tmp路径下,如:"/tmp/tomcat.6574404581312272268.18333/work/T

  • nginx:413 Request Entity Too Large的处理办法--修改 PHP上传文件大小

    开发环境:CentOS + Nginx + PHP + MySql + phpMyAdmin 在用 phpMyAdmin 进行 sql 数据库导入的时候,经常需要上传比较大的 sql 数据文件,而这时会常碰见 nginx报错:413 Request Entity Too Large. 解决此问题,根据上传数据文件的大小,你需要调节两个地方的参数配置: 1.php 默认上传文件大小限制为 2M,如果超出 2M 你需要修改 php 配置文件 php.ini 里面的参数 post_max_size =

  • AJAX实现文件上传功能报错Current request is not a multipart request详解

    想做一个文件上传,spring boot配合Ajax来进行.却报错:Current request is not a multipart request 这是错误截图: 当时发生这种错误,我是很震惊的,我以为找了很多办法来解决. 有以下办法,当然这些并未解决我的问题,但是部分有用,就先列举出来: 1.在页面头部加入信息: <meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8

  • 解决MAC上启动mongod报错exiting with code 1的问题

    今天启动mongod数据库时遇到问题: [js] Error: couldn't connect to server 127.0.0.1:27017, connection attempt failed: SocketException: Error connecting to 127.0.0.1:27017 :: caused by :: Connection refused : connect@src/mongo/shell/mongo.js:341:17 @(connect):2:6 F

  • Nginx HTTP:413 Request Entity Too Large解决方法

    概述 今天遇到一个问题,在PHP程序中上传图片出现了以下错误:HTTP:413 Request Entity Too Large. 开发环境:CentOS + Nginx + PHP + MySql 解决方案 解决此问题,根据上传数据文件的大小,需要调节PHP和Nginx相关的参数配置. 配置PHP PHP默认上传文件大小限制为2M,如果超出2M你需要修改PHP配置文件php.ini里面的参数. 复制代码 代码如下: post_max_size = 8M (表单提交的最大限制,此项不是限制上传单

  • HipChat上传文件报未知错误的原因分析及解决方案

    HipChat的功能类似于Campfire.Sazneo等在线协同工具,并且和Yammer以及Salesforce的Chatter等企业社交平台有一定相似之处.你可以为单个项目或者小组搭建自有的聊天室,也可以很方便的发起一对一聊天.这套 IM 系统还整合了团队文件管理和分享,拖拽就能完成保存操作. 前言 HipChat是Atlassian公司的一款团队协作即时通讯工具,服务端为Linux(官方给的服务端就是一个虚拟机),在Windows.Linux.Android.IOS.Mac等平台都有客户端

随机推荐