将文件和信息统一上传遇到的问题解决
一开始
使用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"></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的
最后解决
监听内容的哪里出现了问题!
- 不是这样子的
files = obj.pushFile(); - 而是应该 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);
});
});
}
});