• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    三个思路解决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问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

    您可能感兴趣的文章:
    • 利用laravel+ajax实现文件上传功能方法示例
    • Laravel框架文件上传功能实现方法示例
    • vuejs+element-ui+laravel5.4上传文件的示例代码
    • PHP Laravel 上传图片、文件等类封装
    • Laravel+Layer实现图片上传功能(整理篇)
    • Laravel中前端js上传图片到七牛云的示例代码
    • Laravel框架+Blob实现的多图上传功能示例
    • Laravel+Intervention实现上传图片功能示例
    • Laravel框架实现的上传图片到七牛功能详解
    • Laravel框架实现文件上传的方法分析
    上一篇:kindeditor 加入七牛云上传的实例讲解
    下一篇:PHP开发中解决并发问题的几种实现方法分析
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

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