请求上传接口出现异常-layui的文件上传问题
问题:ssm+layui项目
在做图片上传时使用layui的文件上传:
https://www.layui.com/demo/upload.html
这个我只用了第一个
“常规使用:普通图片上传”
写好后一直出现“请求上传接口出现异常”的异常。
后来检查发现是在controller中返回类型使用的是JSONObject,然后换成Map就没问题了。
效果:
代码:
前台代码(只有这个还是不行的,你要引入你的layui包):
<div class="layui-upload">
<button type="button" class="layui-btn" id="test1">上传图片</button>
<div class="layui-upload-list">
<img class="layui-upload-img" id="demo1" style="width: 100px;height: 100px">
<p id="demoText"></p>
</div>
</div>
<script>
layui.use('upload', function(){
var $ = layui.jquery
,upload = layui.upload;
//普通图片上传
var uploadInst = upload.render({
elem: '#test1'
,url: '${pageContext.request.contextPath}/admin/lunbo/add'
,accept: 'images'
,acceptMime: 'image/*'
,size: '1024*5'
,before: function(obj){
//预读本地文件示例,不支持ie8
obj.preview(function(index, file, result){
$('#demo1').attr('src', result); //图片链接(base64)
});
}
,done: function(json){
//如果上传失败
if(json.code == 0){
return layer.msg('上传失败-------');
}
//上传成功
if(json.code > 0){
return layer.msg('上传成功--------');
}
}
});
});
</script>
controller中:
@ResponseBody
@RequestMapping("/lunbo/add")
public Map<String,Object> addlunbo(@RequestParam("file") MultipartFile file, HttpServletRequest request) {
Assert.notNull(file, "上传文件不能为空");
String filepath = request.getServletContext().getRealPath("/lunbotu");
String filename = System.currentTimeMillis()+file.getOriginalFilename();
//确保路径存在
File file2 = new File(filepath);
if (!file2.exists()) {
file2.mkdirs();
}
String savepath = filepath+"\\"+filename;
System.out.println("轮播图保存路径:"+savepath);
Map map = new HashMap<String,Object>();
try {
//保存文件到服务器
file.transferTo(new File(savepath));
//保存到数据库
//返回json
map.put("msg","ok");
map.put("code",200);
/*加不加这个都行
map.put("data",new HashMap<String,Object>(){
{
put("src",savepath);
}
});*/
} catch (Exception e) {
map.put("msg","error");
map.put("code",0);
e.printStackTrace();
}
return map;
}
返回的json格式没有强制要求必须有什么参数(code参数还是要有的),但是一定要是Map类型的,我试了使用JSONObject类型的就不行