layui⽂件上传组件“请求上传接⼝出现异常”问题解决⽅案
这是⼀个悲伤的故事，以前开发项⽬⽤过很多次这个组件，这次使⽤了Token，于是报了⼀些莫名其妙的错误，来复盘⼀下，警⽰⾃⼰！
刚开始接触layui的同学们肯定经常会看到这个错误
下⾯我们对这个异常的处理⽅案来总结⼀下：
（1）Controller层的接⼝返回格式不对
  这是最常见的错误，我们先看⼀下官⽅⽂档的接⼝要求
  这⾥注意⼀下最后两段话，可以不按照此格式，但是必须是JSON字符串，绝⼤多数情况在Controller层的⽅法上⾯加SpringMVC的@ResponseBody注解就可以了
  下⾯以我⾃⼰的返回格式实例吧
1{
2    code: 0,
3    message: "成功！",
4    data: {
5        avator: "/20200327173430124807720.jpg"
6    }
7 }
（2）被配置好的SpringMVC给拦截住了
  这⾥的话我建议⼤家在中打印⼀下request的URL来看看是否被拦截，从⽽判断是否发出请求
（3）请求到了Controller但是没接收到⽂件
  在⽂件上传的函数中指定field属性设置字段名即可
  后端Controller同时也要设置指定字段
  字段对应之后就问题不⼤了
（4）请求头加Token的问题前端大文件上传解决方案
  　同样在官⽅⽂档中也有讲解
  在header中指定属性就可以了
  但是，我这⾥就要吐槽⼀下⼼和layui团队了，如上图所⽰的token是不能使⽤字符串来表⽰的，必须直接输属性！！不然的话upload组件是不会向后端发出请求，并且会报出接⼝错误的异常
  例如：
headers: {access_token: “12313213213213”}
  ⽽不是：
headers: {"access_token": “12312313213213213”}
  否则你的浏览器开发者⼯具控制台就会报⼀串乱七⼋糟的数字，我刚才还想复现⼀下这个异常，结果改回去还是可以，我⼈都傻了
  最后附上我的前端代码吧
1//修改头像
2var uploadFile = der({
3        elem: '#uploadAvator',
4        url: projectPrefix + 'user/uploadUserAvator.action',
5        accept: 'images',//校验上传⽂件类型
6        headers: {access_token: localStorage.access_token},
7        acceptMime: "image/*",
8        auto: true,
9        multiple: false,//多⽂件上传
10        field: "avator",//设置字段名
11        before: function () {
12            layer.msg('上传中', {
13                icon: 16,
14                shade: 0.01
15            }); //上传loading
16        }
17        , done: function (res) {
18//上传完毕回调
19            layer.close(layer.index); //关闭loading
20if (de) === 0) {
21                layer.msg("修改成功！");
22                $(".avator").attr("src", hostLocation + "/avator" + res.data.avator);
23            }
24        }
25        , error: function (res) {
26//请求异常回调
27            (res);
28        }
29    });
  两个引号引发的⾎案，折腾了⼀下午，⼤家引以为戒吧。。。。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。