layui进度条element.progress无效解决方法

    很郁闷，也跟着官方的开发文档理解后写了，可就是在progress进度回调函数中只能更新一次。在上传文件中，按照文档的用法是如下的:

 <script>
   layui.use('element', function(){
   	    var element = layui.element;
        var $ = layui.jquery;
   });
   
  var uploadInst = upload.render({
        elem: '#uploadFile' //绑定元素
        ,url: '127.0.0.1:8080/data/upLoadFile' //上传接口
        ,accept: 'file' //允许上传的文件类型
        ,size: 716800 //最大允许上传的文件大小 这里为 700M
        ,auto:false
        ,bindAction:'#sureUpload'
        // ,multiple:'true'
        ,drag:true
        ,data:{
           'id':readyId
           ,'access_token':token
       	   }	
        ,progress: function(n, elem){
			//官方文档中，在获取进度的回调函数中，是这样定义来连接进度条的
             var percent = n + '%' //获取进度百分比
             element.progress('demo1', percent);
      	}
        </script>

但是这样的话，只能设置一次进度条的百分比，或者说 ，根本不能设置成功。演示:

在网上查阅相关的问题后，发现网上的也不能成功。于是自己在多次尝试后，将layui.use(‘element’,function(){});放置进度回调函数里面进行使用，而不是放在外面的初始化。否则就不能进行动态渲染。改变后的代码如下:

    ,progress: function(n, elem){
          layui.use('element', function(){
            var element = layui.element;
            var $ = layui.jquery;
              var percent = n + '%' //获取进度百分比
              //进行动态绑
              layui.element.init();
              //$('#demo1').attr('lay-percent',percent);
              element.progress('demo1', percent);
          });
        }

效果如下:
此时，已经能够正常进行动态渲染,但似乎发现其动态数字进度显示好像很乱，那是因为执行了这行代码，

layui.element.init();

这行代码就是度element进行初始化，我自定义的进度条如下;

<div class="layui-progress layui-progress-big"lay-showpercent="true"lay-filter="demo1">
<div class="layui-progress-bar layui-bg-red" lay-percent="100%"></div>
</div>

发现每次初始化后，值为100，所以进度显示的数字就会每次都变回100，但如果把这行代码加到下面这个位置，进度的数字会显示不出来，代码如下：

   layui.use('element', function(){
        var element = layui.element;
        var $ = layui.jquery;
        //此时加在这里，对进度条进行初始化，会发现进度条不显示数字
         layui.element.init();

    layui.use('upload', function(){
     			 ...
      ,progress: function(n, elem){
              var percent = n + '%' 
              element.progress('demo1', percent);  
        }

我们可以加个次数控制器，在初次执行进度回调函数的时候，对进度条进行初始化，之后可以跳过此初始化代码，代码如下：

 layui.use('element', function(){
        var element = layui.element;
        var $ = layui.jquery;
    layui.use('upload', function(){
      var upload = layui.upload;
      var thisProgress;
      var fileName_up;
		//控制器，可以对回调的次数进行控制
      var come = 0;
   
      //执行实例
      var uploadInst = upload.render({
        elem: '#uploadFile' //绑定元素
        ,url: 'http://*************.51vip.biz/data/upLoadFile' //上传接口
        ,accept: 'file' //允许上传的文件类型
        ,size: 716800 //最大允许上传的文件大小
        ,auto:false
        ,bindAction:'#sureUpload'
        // ,multiple:'true'
        ,drag:true
        ,data:{
           
          }
        ,done: function(res){
          //上传完毕回调
          layer.msg(fileName_up+"上传成功!");
        }
        ,error: function(){
          //请求异常回调
          // layer.msg("上传异常，请检查网络或者查看服务器是否正常.");
        }
        ,progress: function(n, elem){
        		//第一次执行进度回调函数的时候，对进度条进行初始化
              if(come == 0){
                layui.element.init();
                come ++;
              }
              //之后直接执行下面代码，
              var percent = n + '%' //获取进度百分比
              // $('#demo1').attr('lay-percent',percent);
             
              element.progress('demo1', percent);
              
          // });
              
            
        }
      });
    });
  });    

效果:
可以看到，效果已经调整好