layui图片上传报错问题

在家闲着无事 随便搞了一下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，  
对应的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('上传失败 重试');
					  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");

但还是不对。
后来根据报错内容，猜测，是权限不够。我就想放到同一环境下应该有权限了吧。
所以我这才把layui的依赖文件和这个upload.html放到项目的static目录下。。。。。。。。。。

此处默哀十分钟，，，，，

我开始觉得一个js，html可能不需要后台的环境，现在明白了，，访问资源也是需要权限的。
然后这几个html和js依赖文件导入之后，就直接成功了。
而且发现，只要返回的是json字符串，管他是map还是对象都好使（只要包含code,msg这些就行），比如我这用的是respBody。

layui总结：
1、总以为html,js项目外也能执行，真是天真了（不懂前端的难）
2、upload组件向后端传递文件，只能用value=file这个值。
3、上传完毕之后，response返回什么对象都行，只要能正常转换为json字符串就行。