Project background

Recently, in the UAV mission distribution module, there is a business scenario where you need to add specific path points to each flight path. Here, you choose to add them directly by importing the excel table. The path point information has been set in the excel table in advance.

The following is the path list display. I put a file upload (import path point) button in each line of the data list, click the button of the corresponding line to upload the excel file, pass in the path id of the corresponding line, and add the path point data in Excel to the path with the specified id in the background. The page design is as follows:

problem

In the process of writing code, I found that the file upload module of layui is bound to a page element when the page is loaded (as is the case with most file upload plug-ins), that is, it is impossible to bind an independent file function for multiple button s above. When the page is initialized, it is bound by the following code:

<button type="button" class="layui-btn" id="test1">
  <i class="layui-icon">&#Xe67c; < / I > upload picture
</button>

<script>
layui.use('upload', function(){
  var upload = layui.upload;
   
  //Execution instance
  var uploadInst = upload.render({
    elem: '#test1 '/ / binding element
    ,url: '/upload/' //Upload interface
    ,done: function(res){
      //Upload completed callback
    }
    ,error: function(){
      //Request exception callback
    }
  });
});
</script>

Problem solving

Layui provides the overload of file upload instance, that is, it can change the parameters of file upload instance after the first render, through reload method. Here is the code given on the official website of layui:

//Create an instance
var uploadInst = upload.render({
  elem: '#id'
  ,url: '/api/upload/'
  ,size: 1024*5 //Limited size
});
 
//Overload the instance, supporting overloading all basic parameters
uploadInst.reload({
  accept: 'images' //Only images can be uploaded
  ,acceptMime: 'image/*' //Filter pictures only
  ,size: 1024*2 //Limited size
}); 

After thinking, it is not necessary to implement a file upload function for each button, as long as it can ensure that when clicking the upload button of different paths, the path id of the incoming instance can be updated (that is, the data parameter).

So my idea here is:

1. Create a hidden button on the page to upload files for the layui.
2. Add onclick event for each "import path point" in the table. When clicking, pass in the path id of the corresponding flight, then reload the file to upload the instance, and change the passed in parameter to the current path id.

The specific code is as follows:

<button type="button" id="importModel" class="layui-hide">Import path points</button>
<table id="pathList" lay-filter="table"></table>

<script type="text/javascript">
    var uploadInst;                        // Instance global reference

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

            //First instance
            table.render({
                elem: '#pathList'
                ,url: '${baseUrl}/path/pathList' //data interface
                ,method: 'post'
                ,page: true //Open paging
                ,cols: [[ //Header
                    {field: 'id', title: 'ID', width:'6%' ,sort: true, fixed: 'left'}
                    ,{field: 'name', title: 'Path name',width:'21%'}
                    ,{field: 'autoFlightSpeed', title: 'Flight speed', width:'10%', sort: true}
                    ,{field: 'isSetWaypoint', title: 'Path point assigned', width:'13%'}
                    ,{field: 'finishedActionName', title: 'Action after completion', width:'15%'}
                    ,{field: 'updateTime', title: 'Modification time', width: '15%', sort: true}
                    ,{field: 'operation', title: 'operation', width: '20%',templet: function(d){
                        var commonOperations = '<button type="button" class="layui-btn layui-btn-xs">edit</a>'+
                                '<button type="button" class="layui-btn layui-btn-xs">delete</button>';
                        if (d.isSetWaypoint == 0){
                            return commonOperations +
                                '<button type="button" class="layui-btn layui-btn-xs" οnclick=importWaypointModel("'+d.id+'")>Import path points</button>';
                        }else{
                            return commonOperations +
                                '<button type="button" class="layui-btn layui-btn-xs">View path points</a>';
                        }
                    }}
                ]]
            });

        });

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

            //Execution instance
            uploadInst= upload.render({
                elem: '#importModel '/ / binding element
                ,url: '${baseUrl}/path/importWaypointModel' //Upload interface
                ,methd: 'post'
                ,accept: 'file'
                ,exts: 'xls|xlsx'
                ,done: function(res){
                    //Upload completed callback
                    responseStrategy2(res,1,"${baseUrl}/path/pathList");
                }
                ,error: function(){
                    layer.alert("Error in import, please try again!");
                }
            });
        });

    function importWaypointModel(pathId) {
        //Overload the instance, supporting overloading all basic parameters
        uploadInst.reload({
            data:{pathId:pathId}
        });
        $("#importModel").click();
    }