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 //修改头像
2 var uploadFile = upload.render({
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
20 if (parseInt(res.code) === 0) {
21 layer.msg("修改成功!");
22 $(".avator").attr("src", hostLocation + "/avator" + res.data.avator);
23 }
24 }
25 , error: function (res) {
26 //请求异常回调
27 console.error(res);
28 }
29 });
两个引号引发的血案,折腾了一下午,大家引以为戒吧。。。。