完美解决layui多图上传时，动态给每个图片增加参数

需求：当我在使用layui框架上传多图时，我想动态给每一张图都把它的名称传给后台

data: {
  id: function(){
    return $('#id').val();
  }
}

这是官网给的动态传参的方法

我自己根据官网给的案例设置 

data:{filesIndex:function(index, file){
    	return file.name
    }},
//file.name  是我们上传图片的名称

完整代码

var filesName = ''
	layui.use(['form','upload','element', 'layer'],function(){
	var form = layui.form;
	var upload = layui.upload;
	var element = layui.element;
	var $ = layui.$;
  // 制作多文件上传表格
	var fileNum = 0;
	var fileNumer =0;
	var files = []
  	upload.render({
    elem: '#ID-upload-demo-files',
    elemList: $('#ID-upload-demo-files-list'), // 列表元素对象
    url: 'http://192.168.5.38:8084/上传图片的接口地址',//实际使用时改成您自己的上传接口即可。
    accept: 'file',
    multiple: true,
    number:9,
    auto: true,
    data:{filesIndex:function(index, file){
    	return file.name
    }},
    bindAction: '#ID-upload-demo-files-action',
    before: function(obj){
      	files = this.files = obj.pushFile(); // 将每次选择的文件追加到文件队列
      // 读取本地文件
      obj.preview(function(index, file, result){
      	delete files[index]; // 删除对应的文件
    	})
    },
    done: function(res, index, upload){ // 成功的回调
    	var index = index.substring(getLastDotIndex(index)+1)
      	var that = this;
      	var filesName = res.att_ename
		var filesImgUrl = ''
      	var nameStr = filesName.substring(getLastDotIndex(filesName)+1)
      	if(nameStr =='jpg' || nameStr=='png' || nameStr=='gif' || nameStr=='jpeg'){
      		filesImgUrl = 'http://192.168.5.38:8084/sh/files'+res.att_path+res.att_ename
      	}else if(nameStr=='mp4'){
      		filesImgUrl = 'images/mp4.png'
      	}else if(nameStr=='doc'){
      		filesImgUrl = 'images/word.png'
      	}else if(nameStr=='xlsx'){
      		filesImgUrl = 'images/exl.png'
      	}else if(nameStr=='ppt'){
      		filesImgUrl = 'images/ppt.png'
      	}else if(nameStr=='pdf'){
      		filesImgUrl = 'images/pdf.png'
      	}else if(nameStr=='zip' || nameStr=='rar'){
      		filesImgUrl = 'images/zip.png'
      	}else{
      		filesImgUrl = 'images/pdf.png'
      	}
      	
		function getLastDotIndex(str) {
			return str.lastIndexOf('.');
		}
		
		var html=''
   		html+='<li class="bui-btn bui-box">'+
   			'<input name="file' + fileNum + '_title" id="file' + fileNum + '_title" value="' + res.filesIndex + '" type="hidden">'+
   			'<input name="file' + fileNum + '_url" id="file' + fileNum + '_url" class="filesUrl" value="'+res.att_path+res.att_ename+'" type="hidden">'+
			'<div class="bui-thumbnail">'+
				'<img src="'+filesImgUrl+'">'+
			'</div>'+
			'<div class="span1">'+
			'<a class="layui-btn layui-btn-xs layui-btn-danger demo-delete" data-name="'+res.att_ename+'">删除</a>'+
			'<h3 class="item-title">'+res.filesIndex+'</h3>'+
			'<div class="layui-progress" lay-filter="100%"><div class="layui-progress-bar" lay-percent="100%"></div></div>'+
			'</div></li>'

		$('#ID-upload-demo-files-list').append(html);
        element.render('progress'); // 渲染新加的进度条组件
        fileNum= fileNum+1
        fileNumer = fileNumer+1
		$('.fileNumer').val(fileNumer)
		
		$(document).on('click','.demo-delete',function(){
			delete files[index]; // 删除对应的文件
			$(this).parent().parent('li').remove()
			var files_listSize = $('#ID-upload-demo-files-list').find('li.bui-box').length;
			fileNumer=fileNumer--
			if(files_listSize==0){
				$('.fileNumer').val('');
				fileNumer=0
			}else{
				fileNumer = files_listSize
				$('.fileNumer').val(fileNumer);
			}
		})
      	
        return;
      	this.error(index, upload);
    },
    allDone: function(obj){ // 多文件上传完毕后的状态回调
//  	console.log(obj)
    },
    error: function(index, upload){ // 错误回调
      var that = this;
    },
    progress: function(n, elem, e, index){ // 注意：index 参数为 layui 2.6.6 新增
      element.progress('progress-demo-'+ index, n + '%'); // 执行进度条。n 即为返回的进度百分比
    }
  });
  /这是最终提交的代码/
	form.on('submit(formDemo)', function(data){
		var field = data.field;
		$('.submitForm').addClass('layui-btn-disabled');
		var index = layer.load(3, {shade: true},);
    	setTimeout(function(){
			$.ajax({
			  	type:"post",
			  	url:"http://192.168.5.38:8084/sh/front/提交接口地址",
			  	async:true,
			  	data:field,
			  	success(res){
			  		var ress = JSON.parse(res)
			  		if(ress.result=="success"){
			  			layer.close(index);
			  			layer.msg('提交成功');
			  		}
			  		setTimeout(function(){
			  			location.reload();
			  		},800)
			  	},
			  	error(err){
			  		layer.close(index);
			  		layer.msg('提交错误');
					$('.submitForm').removeClass('layui-btn-disabled');
			  	}
			});
		},1000);
		return false;
	});
  ///
});