LayUI upload 控件上傳提示 404 找不到後臺請求方法。

原創

2020-06-17 05:26

1.本次上傳文件Excel批量導入文件。

上傳頁面layui寫法,彈框頁面如圖。

<li class="layui-timeline-item">
    <i class="layui-icon layui-timeline-axis"></i>
    <div class="layui-timeline-content layui-text">
        <h3 class="layui-timeline-title">3、選擇並上傳</h3>
        <p>根據下載/導出的模板，編輯人員信息</p><br/>
        <div class="layui-upload">
            <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" id="test10">選擇人員</button>
            <button type="button"  class="layui-btn layui-btn-sm" id="test100">開始上傳</button>
        </div>
    </div>
</li>

2.接下來完成js方法。

top.$("#addAndEdit_class #exp_people_btn").off("click");
top.$("#addAndEdit_class #exp_people_btn").on("click", function () {		
    var expUserWindow = top.layer.open({
        type: 1,
        title: '導入人員',
        maxmin: true,
        area: ['750px', '400px'],
        content: $("#addAll2").html(),
        btn: ['確定', '取消'],
        yes: function () { // 確定按鈕點擊事件
            top.layer.close(expUserWindow);
            $("#addAll2").hide();							
            return false;
        },
        cancel: function () { // 右上角關閉回調
            top.layer.close(expUserWindow);
            $("#addAll2").hide();
        },
        btn2: function () {
            top.layer.close(expUserWindow);
            $("#addAll2").hide();
        },
        success: function (layero, index) { // 彈框彈出成功後的回調
            window.parent.reRenderForm();
            top.layui.use('upload', function(){
            var $ = top.layui.jquery,upload = top.layui.upload;  

                //選完文件後不自動上傳 
                        upload.render({
                        elem: '#test10'
                        ,url: "${pageContext.request.contextPath}/customer/importCustomers"
                        ,accept: 'file' //普通文件
                        ,auto: false
                        ,field:'filess'
                        ,exts: 'xls' 
                        ,bindAction: '#test100' 
                        ,done: function(res){
                            console.log(res)
                            openPopup(res);
                        }
                        ,before: function(){
                            var index = top.layer.load(0, {shade: false}); //0代表加載的風格，支持0-2
                            //loading層
                            index = top.layer.load(1, {
                                shade: [0.5,'#ccc'],//0.1透明度的白色背景
                            });
                            setTimeout(function () {
                                top.layer.close(index)
                            }, 2000)
                        }
                    });
                
                });					
            }
    });
})

3.完成java後臺請求接口。
注意因爲upload控件返回必須是json數據所以要加上 @ResponseBody 註解

/**
* Customers Excle 批量導入
* @param file
* @return
* @throws Exception
*/
@RequestMapping(value="/importCustomers",method = {RequestMethod.POST})
@ResponseBody
public Map<String,Object> importEmpls(@RequestParam(value = "filess", required = true) MultipartFile[] file) throws Exception{
    PageData pageData = getPageData();
    pageData.put("filess",file);
    pageData.put("createId", getCreateID());
    pageData.put("createTime", getCreateTime());
    Map<String,Object> map= kpxCustomerService.importCustomers(pageData);
    logger.debug(map.toString());
    return map;
}

4.如果不加上註解，實際上後臺已經接受到請求，而瀏覽器則是報錯404找不到。