layui框架实战案例(3):layui上传错误请求上传接口出现异常解决方案

简介: layui框架实战案例(3):layui上传错误请求上传接口出现异常解决方案

20200205002209323.jpg


问题描述:

1、本地phpstudy部署,php 7.0.12, MySQL5.5.53 本地测试正常;

2、服务器环境,宝塔配置部署WAMP,测试正常;

异常情况:

服务器环境windows 2016,phpstudy pro部署, php 7.3 ,MySQL5.7.6,出现上图错误。

layui版本:v2.2.6 MIT


其实遇见这种问题是很奔溃,因为这个错误原因,事情往往是是干进度的时候出现的。时间本身就是个硬杠杠,并且这个是个综合性且复杂的问题。解决思路(错误的方式):发挥面向百度编程的精神,依次经历如下:


1.配置问题,php.inc,很面熟,就当复习一遍

file_uploads = on ;是否允许通过HTTP上传文件的开关。默认为ON即是开

upload_tmp_dir ;文件上传至服务器上存储临时文件的地方,如果没指定就会用系统默认的临时文件夹

upload_max_filesize = 8m ;望文生意,即允许上传文件大小的最大值。默认为2M

post_max_size = 8m ;指通过表单POST给PHP的所能接收的最大值,包括表单里的所有值。默认为8M


2.怀疑前端代码问题

前端HTML

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>拖拽上传</legend>
    </fieldset>
    <div class="layui-upload-drag" id="healthImport">
        <i class="layui-icon"></i>
        <p>点击上传,或将文件拖拽到此处</p>
    </div>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>为节省服务器开销,导入文件均为临时文件。</legend>
    </fieldset>


前端JS

 layui.use('upload', function () {
        var $ = layui.jquery
                , upload = layui.upload;
        upload.render({
            elem: '#healthImport'
            ,url: '?m=Health&a=uploadFile'
            ,accept: 'file'
            ,exts: 'xls'
            ,dataType: "json"
            ,before: function(){
                layer.load();
            }
            , done: function (res) {
                if (res.code == 0) {
                    return layer.msg('上传失败,' + res.err);
                }
                if (res.code > 0) {
                    layer.alert(res.err, {icon: 6}, function () {
                        var index = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(index);
                        window.parent.location.reload();
                    });
                }
            }
        });
    });

这个可能性如果是代码有问题,在前两种环境中就被否认了,所以前端看来是没有问题的。


所有的可能性排除完,倒逼着走向正确的解题思路:“请求上传接口出现异常”,到底是哪里异常,如果这个地方不能正确的调试出问题的所在,所有的“面向百度编程”就是碰运气。忘记百度到哪位兄弟的解决方案了,再次对改解决思路予以感谢,就是修改layui底层的提示信息,准确的报错,就可以解决。


上传核心js路径:

layui\lay\modules\upload.js


打开后,首先将压缩的js代码,重新格式化代码,如图:



这个就是模糊提示,修改提示信息如下:

                    error: function (res) {
                        var dd=res.responseText.replace(/<\/?.+?>/g,"");
                        var text=dd.replace(/ /g,"");//去掉所有空格
                        n++, o.msg("请求上传接口出现异常"+text), m(e), u()
                    }


保存,清除缓存,刷新,是不是问题就暴露出来了。因为不同配置会有不同的原因,这里就不再啰嗦了,具体原因会在另一篇文章予以分析。

相关文章
解决layUI请求上传接口出现异常的解决方案
解决layUI请求上传接口出现异常的解决方案
648 0
SpringMVC解决下载文件名乱码的问题
SpringMVC解决下载文件名乱码的问题
301 0
LayUI upload上传组件上传文件的两种方式
LayUI upload上传组件上传文件的两种方式
1295 0
|
7月前
|
机器学习/深度学习 存储 并行计算
【无人机】基于MPC的无人机路径规划研究(Matlab代码实现)
【无人机】基于MPC的无人机路径规划研究(Matlab代码实现)
630 6
|
JavaScript 前端开发 API
【前端用法】jQuery在线引用地址(全)
【前端用法】jQuery在线引用地址(全)
1280 0
|
JavaScript 开发者 Windows
NVM 介绍及使用指南
NVM(Node Version Manager)是用于管理多个 Node.js 版本的命令行工具,帮助开发者在同一台机器上轻松切换不同版本的 Node.js,避免版本不兼容问题。本文介绍 NVM 的基本概念、Windows 安装方法及常用操作,助你高效管理 Node.js 版本。
1427 13
 NVM 介绍及使用指南
|
前端开发 开发者 UED
UI 框架:nav-ui&uni-ui&vant
本文档介绍了`nav-ui`、`uni-ui`和`vant`三个UI库的基本使用方法,包括图标、表格和树的使用示例,以及如何在项目中安装和配置这些UI组件。对于`nav-ui`,详细说明了图标组件的安装与使用,包括本地图标和第三方图标库的集成方式。`uni-ui`部分则重点讲解了CSS的使用方法。最后,`vant`部分提供了从项目创建到组件安装的具体步骤,以及如何将下载的组件正确地集成到项目中。
652 4
|
域名解析 缓存 网络协议
计算机网络——网络基础_网络命令的使用(配置主机IP、ipconfig、ping、tracert、arp实战)
任务要求 打开Windows 10的命令(控制台)窗口。 实验步骤 有多种方法打开Windows命令(控制台)窗口。其中一种较为快速的方法是: 在键盘上按下“Win+R"组合键,系统将打开“运行"窗口,如图1-1所示。键入cmd.按回车键或单击“确定”按钮,Windows将打开命令(控制台)窗口,显示俞令提示符,如图1-2所示。
2686 1
计算机网络——网络基础_网络命令的使用(配置主机IP、ipconfig、ping、tracert、arp实战)
|
JSON PHP 数据格式
layui框架实战案例(1):layui组件table异步加载数据结合php后台动态翻页的解决方案
layui框架实战案例(1):layui组件table异步加载数据结合php后台动态翻页的解决方案
636 0