博客

项目背景

最近在做无人机任务下发模块，有一个业务场景，就是要给每一条飞行路径添加具体的路径点，这里选择通过导入excel表的方式来直接添加，路径点信息提前已经在excel表中设置好了。

下面是路径的列表展示，我在数据列表中每一行都放一个文件上传（导入路径点）按钮，点击对应行的按钮上传excel文件，同时传入对应行的路径id，在后台将excel中的路径点数据添加到指定id的路径中。页面设计如下：

问题

在编写代码的过程中，我发现layui的文件上传模块都是在页面加载的时候绑定到

一个

页面元素上（大部分文件上传插件都是如此），即不可能为上面多个button都绑定一个独立的文件功能。页面初始化时通过以下代码绑定：

<button type="button" class="layui-btn" id="test1">
  <i class="layui-icon">&#xe67c;</i>上传图片
</button>

<script>
layui.use('upload', function(){
  var upload = layui.upload;
   
  //执行实例
  var uploadInst = upload.render({
    elem: '#test1' //绑定元素
    ,url: '/upload/' //上传接口
    ,done: function(res){
      //上传完毕回调
    }
    ,error: function(){
      //请求异常回调
    }
  });
});
</script>

问题解决

layui 2.5.0版本新增了对文件上传实例的重载，即能够在第一次render渲染后还能够改变文件上传实例的参数，通过reload方法。下面是layui官网给出的代码：

//创建一个实例
var uploadInst = upload.render({
  elem: '#id'
  ,url: '/api/upload/'
  ,size: 1024*5 //限定大小
});
 
//重载该实例，支持重载全部基础参数
uploadInst.reload({
  accept: 'images' //只允许上传图片
  ,acceptMime: 'image/*' //只筛选图片
  ,size: 1024*2 //限定大小
}); 

经过思考，其实没有必要为每个按钮都实现一个文件上传功能，因为只要能保证：点击不同路径的上传按钮时，能够更新传入实例的路径id即可（即data参数）。

所以这里我的思路是：

1. 在页面创建一个隐藏的button，为layui的文件上传按钮。
2. 为table中的每个“导入路径点”添加onclick事件，当点击时传入对应航的路径id，然后重载文件上传实例，更改传入的参数为当前路径id。

具体代码如下：

<button type="button" id="importModel" class="layui-hide">导入路径点</button>
<table id="pathList" lay-filter="table"></table>

<script type="text/javascript">
    var uploadInst;                        // 实例全局引用

    layui.use('table', function(){
            var table = layui.table;

            //第一个实例
            table.render({
                elem: '#pathList'
                ,url: '${baseUrl}/path/pathList' //数据接口
                ,method: 'post'
                ,page: true //开启分页
                ,cols: [[ //表头
                    {field: 'id', title: 'ID', width:'6%' ,sort: true, fixed: 'left'}
                    ,{field: 'name', title: '路径名称',width:'21%'}
                    ,{field: 'autoFlightSpeed', title: '飞行速度', width:'10%', sort: true}
                    ,{field: 'isSetWaypoint', title: '已分配路径点', width:'13%'}
                    ,{field: 'finishedActionName', title: '完成后动作', width:'15%'}
                    ,{field: 'updateTime', title: '修改时间', width: '15%', sort: true}
                    ,{field: '操作', title: '操作', width: '20%',templet: function(d){
                        var commonOperations = '<button type="button" class="layui-btn layui-btn-xs">编辑</a>'+
                                '<button type="button" class="layui-btn layui-btn-xs">删除</button>';
                        if (d.isSetWaypoint == 0){
                            return commonOperations +
                                '<button type="button" class="layui-btn layui-btn-xs" onclick=importWaypointModel("'+d.id+'")>导入路径点</button>';
                        }else{
                            return commonOperations +
                                '<button type="button" class="layui-btn layui-btn-xs">查看路径点</a>';
                        }
                    }}
                ]]
            });

        });

    layui.use('upload', function(){
            var upload = layui.upload;

            //执行实例
            uploadInst= upload.render({
                elem: '#importModel' //绑定元素
                ,url: '${baseUrl}/path/importWaypointModel' //上传接口
                ,methd: 'post'
                ,accept: 'file'
                ,exts: 'xls|xlsx'
                ,done: function(res){
                    //上传完毕回调
                    responseStrategy2(res,1,"${baseUrl}/path/pathList");
                }
                ,error: function(){
                    layer.alert("导入中出现错误，请重新尝试！");
                }
            });
        });

    function importWaypointModel(pathId) {
        //重载该实例，支持重载全部基础参数
        uploadInst.reload({
            data:{pathId:pathId}
        });
        $("#importModel").click();
    }