Layui解决upload的data参数传输失败问题

milk_yan

已于 2025-02-28 13:51:58 修改

阅读量557

点赞数 19

CC 4.0 BY-SA版权

分类专栏：前端文章标签： layui 前端 javascript java

于 2025-02-25 14:25:52 首次发布

本文链接：https://blog.csdn.net/milk_yan/article/details/145851857

前端专栏收录该内容

4 篇文章

订阅专栏

前言

layui上传文件时，有时候需要往后台多传递一些自定义的参数。

问题

按照官方的写法upload.render初始化的data:{id:"sss"}不能传参到后台。如下图所示：

分析

1、如果直接给{id:"sss"}无效，但如果在before里，this.data.id="sss" 却是有效。

2、经过多次测试及理解，应该是data接收的是严紧的JSON格式如｛"ID":"sss"}

3、但这个是公用的上传EXCEl界面，所以data参数是由父窗体传过来的，所以独立进行了JSON.stringify(jsonParams);后再JSON.parse()。

解决

在before里使用this.data.id="sss" 是可以接收到的，具体的写法如下：

before: function(obj) {
    this.data = {"xxx": "xxx"};
 }

实际使用：

  //指定具体的一个上传按钮
  upload.render({
         elem: '#uploadBtn' //绑定元素
         , url: ctxPath + 'performanceDataImport/importExcel' //上传接口
         , accept: 'file'
         , exts: 'xls|xlsx'
         , before: function (obj) { //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
             this.data = {
                 id: "sss",
                 examineYear: $("#examineYear").val(),
                 examineQuarter:$("#examineQuarter").val()
             };
             layer.load(); //上传loading
  }

/**
     * 导入excel文件
     * @param file
     * @return
     */
    @RequestMapping(value = "importExcel", method = RequestMethod.POST, consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
    @ResponseBody
    public LayUiAdminResultVo importExecutionData(@RequestPart(value = "file") MultipartFile file,HttpServletRequest request,
                                                  String examineYear,String examineQuarter,String id) {