将文件和信息统一上传遇到的问题解决(上传文件后端接收的一直是String类型)

将文件和信息统一上传遇到的问题解决

一开始

使用layui上传的模板

<div class="layui-form-item">
	<div class="layui-form-item">
		<label class="layui-form-label">资源文件<span class="text-danger">*</span></label>
		<div class="layui-input-block">
			<div class="layui-upload">
				<div id="fileShow" style="padding: 5px">
					<button type="button" class="layui-btn layui-btn-normal" id="addQuestionFiles">
						<i class="layui-icon">&#xe67c;</i>只允许上传zip文件
					</button>
				</div>
			</div>
		</div>
	</div>
</div>

js内容

//监听上传文件
let files = [];
layui.upload.render({
	elem: '#addQuestionFiles'
	,url: ''
	,accept: 'file'
	,multiple: true
	,auto: false
	,exts: 'zip' //只允许上传压缩文件
	,choose: function(obj){
		files  = obj.pushFile();
		$("#fileShow").empty();
		obj.preview(function(index, file, result){
			let getTpl = fileTemplate.innerHTML;
			file.sizeInfo = (file.size/1014).toFixed(1) +'kb';
			layui.laytpl(getTpl).render(file,function (html) {
				$("#fileShow").html(html);
			});
		});

	}
});

请求的内容

$.ajax({
	type: "POST",
	url: "./add",
	data: formData,
	traditional: true,
	contentType : false,
	processData : false,
	success: function(data) {
		$.handlerResult({
			result: data,
			success(m, d) {
				layer.msg("添加成功", {
					icon: 1
				});
				layer.closeAll('page');
				table.reload('OfficeProblemTable', {
					url: './list' //数据接口
					,
					page: {
						curr: 1 //重新从第 1 页开始
					},
					where: {}
				});
			}
		});
	}
});

此时发现上传回去的那个文件类型一直接收不到，后端时候的是MultipartFile的

---

最后解决

监听内容的哪里出现了问题！

1. 不是这样子的 files = obj.pushFile();
2. 而是应该 files = this.files = obj.pushFile();

最后的成品

layui.upload.render({
			elem: '#addQuestionFiles'
			,url: ''
			,accept: 'file'
			,multiple: true
			,auto: false
			,exts: 'zip' //只允许上传压缩文件
			,choose: function(obj){
				files = this.files = obj.pushFile(); //最主要就是这里了
				$("#fileShow").empty();
				obj.preview(function(index, file, result){
					let getTpl = fileTemplate.innerHTML;
					file.sizeInfo = (file.size/1014).toFixed(1) +'kb';
					layui.laytpl(getTpl).render(file,function (html) {
						$("#fileShow").html(html);
					});
				});

			}
		});