layui文件上傳組件“請求上傳接口出現異常”問題解決方案

這是一個悲傷的故事，以前開發項目用過很多次這個組件，這次使用了Token，於是報了一些莫名其妙的錯誤，來復盤一下，警示自己！

剛開始接觸layui的同學們肯定經常會看到這個錯誤

 下面我們對這個異常的處理方案來總結一下：

（1）Controller層的接口返回格式不對

　　這是最常見的錯誤，我們先看一下官方文檔的接口要求

　　

 　　這里注意一下最后兩段話，可以不按照此格式，但是必須是JSON字符串，絕大多數情況在Controller層的方法上面加SpringMVC的@ResponseBody注解就可以了

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

​ { 2     code: 0, 3     message: "成功！", 4  data: { 5        avator: "/20200327173430124807720.jpg"   
 } 7 }   

（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({  3         elem: '#uploadAvator',  4         url: projectPrefix + 'user/uploadUserAvator.action',  5         accept: 'images',//校驗上傳文件類型
 headers: {access_token: localStorage.access_token},  7         acceptMime: "image/*",  8         auto: true,  9         multiple: false,//多文件上傳
        field: "avator",//設置字段名
        before: function () { 12             layer.msg('上傳中', { 13                 icon: 16, 14                 shade: 0.01
            }); //上傳loading
 } 17         , done: function (res) { 18             //上傳完畢回調
            layer.close(layer.index); //關閉loading
            if (parseInt(res.code) === 0) { 21                 layer.msg("修改成功！"); 22                 $(".avator").attr("src", hostLocation + "/avator" + res.data.avator); 23  } 24  } 25         , error: function (res) { 26             //請求異常回調
 console.error(res); 28  } 29     });

　　兩個引號引發的血案，折騰了一下午，大家引以為戒吧。。。。