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

在这里插入图片描述
问题描述:
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

  1. 怀疑前端代码问题

前端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 upload.js 2.26版,已上传到CSDN,请自行下载:
layui请求上传接口出现异常解决方案:upload.js 错误底层准确报错信息代码修改
Done!

![图片说明](https://img-ask.csdn.net/upload/201905/25/1558713715_871569.png) **前端请求时候 url 500** ``` <script src="${pageContext.request.contextPath}/resources/layui.all.js"></script> <script> $ = layui.$; var $ = layui.jquery var form = layui.form; var element=layui.element; var layer=layui.layer; var upload = layui.upload; $("#nav").load("/filmos/nav"); upload.render({ elem: &#39;#choose&#39; , auto: false , url: &#39;${pageContext.request.contextPath}/user/updateuserimg&#39; ,accept: &#39;file&#39; , bindAction: &#39;#upload&#39; , choose: function (obj) {//选择文件的回调,obj为选中的文件 //将每次选择的文件追加到文件队列 var files = obj.pushFile(); //预览选中的文件(本地文件) obj.preview(function (index, file, result) { $(&#39;#user-img&#39;).attr(&#39;src&#39;, result); $(&#39;#upload&#39;).css(&#39;display&#39;, &#39;block&#39;); }); } , before: function (obj) {//文件上传前的回调 } , done: function (res) { if (res.code==200) { location.href = "${pageContext.request.contextPath}/ok" }else { //演示失败状态,并实现重传 return layer.msg(res.msg); } } ,error: function(res) { console.log(res); console.log(res.code); console.log(res.msg); var demoText = $(&#39;#demoText&#39;); demoText.html(&#39;<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>&#39;); demoText.find(&#39;.demo-reload&#39;).on(&#39;click&#39;, function () { uploadInst.upload(); }); } }); </script> </body> </html> ``` **js代码** ![图片说明](https://img-ask.csdn.net/upload/201905/25/1558713861_529370.png) **但是实际上功能是实现了的 数据库中也更新了 但是每次都会弹出接口异常** ``` //上面还有个requestmapping是user 通过user/updateuserimg到这个方法 @ResponseBody @RequestMapping(value = "/updateuserimg", method = {RequestMethod.POST,RequestMethod.GET}) private JSONObject updateUserImg(@RequestParam(value = "file", required = false) CommonsMultipartFile multipartFile, HttpSession session) throws IOException{ User user = (User) session.getAttribute("user"); JSONObject jsonObject=new JSONObject(); if (multipartFile != null && multipartFile.getSize() > 0&& user!=null) { userService.updateUserImg(user, multipartFile.getInputStream(), multipartFile.getOriginalFilename()); session.setAttribute("user", userService.login(user)); jsonObject.put("code",200); jsonObject.put("msg","更新成功!"); jsonObject.put("src",user.getUserImg()); return jsonObject; } else { jsonObject.put("code",400); jsonObject.put("msg","更新失败!"); return jsonObject; } } } ``` Contoller的代码 ![图片说明](https://img-ask.csdn.net/upload/201905/25/1558713969_417859.png) ssm配置的 ![图片说明](https://img-ask.csdn.net/upload/201905/25/1558714077_867660.png) ![图片说明](https://img-ask.csdn.net/upload/201905/25/1558714083_361418.png)![图片说明](https://img-ask.csdn.net/upload/201905/25/1558714089_172810.png)
©️2020 CSDN 皮肤主题: 精致技术 设计师:CSDN官方博客 返回首页