layui文件上传组件“请求上传接口出现异常”问题解决方案

这是一个悲伤的故事，以前开发项目用过很多次这个组件，这次使用了Token，于是报了一些莫名其妙的错误，来复盘一下，警示自己！

刚开始接触layui的同学们肯定经常会看到这个错误

 下面我们对这个异常的处理方案来总结一下：

（1）Controller层的接口返回格式不对

　　这是最常见的错误，我们先看一下官方文档的接口要求

　　

 　　这里注意一下最后两段话，可以不按照此格式，但是必须是JSON字符串，绝大多数情况在Controller层的方法上面加SpringMVC的@ResponseBody注解就可以了

　　下面以我自己的返回格式实例吧

​ { 
    code: 0, 
    message: "成功！", 
    data: {
       avator: "/20200327173430124807720.jpg"   
    } 
}   

（2）被配置好的SpringMVC拦截器给拦截住了

　　这里的话我建议大家在拦截器中打印一下request的URL来看看是否被拦截器拦截，从而判断是否发出请求

（3）请求到了Controller但是没接收到文件

　　

 　　在文件上传的函数中指定field属性设置字段名即可

　　后端Controller同时也要设置指定字段

　　

　　字段对应之后就问题不大了

（4）请求头加Token的问题

　　　同样在官方文档中也有讲解

　　

 　　在header中指定属性就可以了

　　但是，我这里就要吐槽一下心姐和layui团队了，如上图所示的token是不能使用字符串来表示的，必须直接输属性！！不然的话upload组件是不会向后端发出请求，并且会报出接口错误的异常

　　例如：

headers: {access_token: “12313213213213”}

　　而不是：

headers: {"access_token": “12312313213213213”}

　　否则你的浏览器开发者工具控制台就会报一串乱七八糟的数字，我刚才还想复现一下这个异常，结果改回去还是可以，我尼玛人都傻了

　　最后附上我的前端代码吧

//修改头像
    var uploadFile = upload.render({
        elem: '#uploadAvator',
        url: projectPrefix + 'user/uploadUserAvator.action',
        accept: 'images',//校验上传文件类型
        headers: {access_token: localStorage.access_token},
        acceptMime: "image/*",
        auto: true,
        multiple: false,//多文件上传
        field: "avator",//设置字段名
        before: function () {
            layer.msg('上传中', {
                icon: 16,
                shade: 0.01
            }); //上传loading
        }
        , done: function (res) {
            //上传完毕回调
            layer.close(layer.index); //关闭loading
            if (parseInt(res.code) === 0) {
                layer.msg("修改成功！");
                $(".avator").attr("src", hostLocation + "/avator" + res.data.avator);
            }
        }
        , error: function (res) {
            //请求异常回调
            console.error(res);
        }
    });

　　两个引号引发的血案，折腾了一下午，大家引以为戒吧。。。。