layui图片上传报错问题

最新推荐文章于 2024-06-10 23:36:26 发布

CApp

最新推荐文章于 2024-06-10 23:36:26 发布

阅读量1.6k

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/wujin274/article/details/104602409

版权

笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在家闲着无事随便搞了一下Springboot+Mybatis。发现没有界面，就找了很多前端框架最后看重了国产layui。

此为前言。

为什么写这篇呢，因为今天犯了个巨大的错误。简直到家了

1、使用layui，基本所有控件都试了一遍。
2、对requestMapping等有了一定的认识。
3、对@ResponseBody有了一定的认识。
基本用法就是返回的时候：return new RespEntity(RespCode.SUCCESS, Object);
他会自动把object对象序列化为一个json字符串。
4、RespEntity，就是一个包含了code,msg，object的response响应对象，超好用。而RespCode是个枚举类，可自定义，非常方便。
5、说了responseBody，就得说说requestBody.（在后面写到了。）
然后进行表达的操作就非常方便了。

@ResponseBody
@RequestMapping("/reqMA")
public RespEntity testRequestBody(@RequestBody ReqUser rqUser) {
	return new RespEntity(RespCode.SUCCESS, rqUser);
}

7、做了个upload实验，使用layui。这也是今天写这个的原因。
html界面还是使用layui推荐的，主要就是button，  <button type="button" class="layui-btn">
对应的js为：

layui.use('upload', function(){
				  var $ = layui.jquery
				  ,upload = layui.upload;
				  //普通图片上传
				  var uploadInst = upload.render({
					elem: '#test_upload'
					,url: 'http://localhost:9999/test/upload2' //改成您自己的上传接口
					,exts: 'jpg|png|jpeg|gif'//设置可上传文件
					,before: function(obj){
					  //预读本地文件示例，不支持ie8
					  obj.preview(function(index, file, result){
						$('#demo1preview').attr('src', result); //图片链接（base64）
					  });
					}
					,done: function(res){
						console.log(res);
						layer.msg(res.msg);
					}
					,error: function(data){
					  //演示失败状态，并实现重传
					  console.log(data);
					  var demoText = $('#demoText');
					  demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
					  demoText.find('.demo-reload').on('click', function(){
						uploadInst.upload();
					  });
					}
				  });
			});

后台的代码：

@ResponseBody
	@RequestMapping(value = "/upload3", method = RequestMethod.POST)
	public RespEntity testFileUpload(@RequestParam(value = "file", required = false) MultipartFile test_upload) {///这里有个大坑，value必须是file。
		if (!test_upload.isEmpty()) {
			String fileDir = env.getProperty(Constant.upload_file_dir);
			File ff = new File(fileDir + test_upload.getOriginalFilename());
			try (BufferedOutputStream out = new BufferedOutputStream(new FileOutputStream(ff));) {
				log.debug("testFileUpload:" + ff.getAbsolutePath());
				out.write(test_upload.getBytes());
				out.flush();
				return new RespEntity(RespCode.SUCCESS, ff.getAbsoluteFile());
			} catch (FileNotFoundException e) {
				e.printStackTrace();
				log.error(e.getLocalizedMessage());
			} catch (IOException e) {
				e.printStackTrace();
				log.error(e.getLocalizedMessage());
			}
		}
		return new RespEntity(RespCode.WARN, "文件为空");
	}

后台的代码坑比较多。
（1）@RequestParam(value = “file”, required = false) MultipartFile test_upload，这里的参数名必须是“file”。哪怕前台指定了name属性也获取不到。
（2）设置好了这些，能看到文件通过后台，写入了服务器了，但是前台老是报错“请求上传接口出现异常”。我就上网找了很多文章。
什么content-type的，什么返回值类型必须得是Map类型的，我都试过了。包括连layui需要的upload.js模块我都看了一些报错源码是怎么写的。
结果发现后台的代码应该是没有问题的。
后来用chrome查看前台控制台打印的日志。发现的问题：

Access to XMLHttpRequest at ‘http://localhost:9999/test/upload2’ from
origin ‘null’ has been blocked by CORS policy: No
‘Access-Control-Allow-Origin’ header is present on the requested
resource.

百度又说是响应头的问题，查来查去也添加了这些属性：

res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By",' 3.2.1')
res.header("Content-Type", "application/json;charset=utf-8");